web-dev-qa-db-ja.com

angular 2コンポーネント内のng-contentにアクセス

コンポーネントクラス自体からコンポーネントの「content」にアクセスするにはどうすればよいですか？

私はこのようなことをしたいと思います：

<upper>my text to transform to upper case</upper>

コンポーネント内のコンテンツまたは上位タグを取得するにはどうすれば@Input属性については？

@Component({
    selector: 'upper',
    template: `<ng-content></ng-content>`
})
export class UpperComponent {
    @Input 
    content: String;
}

PS：大文字変換にパイプを使用できることは知っています。これは単なる例です。コンポーネントを使用してコンポーネントのコンテンツにアクセスする方法を知っているだけで、上位コンポーネントを作成したくありません。

javascripttypescriptangularangular2-directives
24
Daniel Kobler

これには@ContentChildデコレーターを活用する必要があります。

@Component({
  selector: 'upper',
  template: `<ng-content></ng-content>`
})
export class UpperComponent {
  @Input 
  content: String;

  @ContentChild(...)
  element: any;
}

編集

あなたの問題をもう少し調査しましたが、ルート内部DOM要素がないため、ここで@ContentChildを使用することはできません。

DOMを直接活用する必要があります。実用的なソリューションは次のとおりです。

@Component({
  selector: 'upper',
  template: `<ng-content></ng-content>`
})
export class UpperComponent {
  constructor(private elt:ElementRef, private renderer:Renderer) {
  }

  ngAfterViewInit() {
    var textNode = this.elt.nativeElement.childNodes[0];
    var textInput = textNode.nodeValue;
    this.renderer.setText(textNode, textInput.toUpperCase());
  }
}

詳細については、このplunkrを参照してください： https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

18
Thierry Templier

トランスクルージョンされたコンテンツのコンポーネントへの参照を取得する場合は、次を使用できます。

@Component({
    selector: 'upper',
    template: `<ng-content></ng-content>`
})
export class UpperComponent {
    @ContentChild(SomeComponent) content: SomeComponent;
}

ラップする場合<ng-content>その後、次のようなトランスクルージョンされたコンテンツへのアクセスにアクセスできます。

@Component({
    selector: 'upper',
    template: `
  <div #contentWrapper>
    <ng-content></ng-content>
  </div>`
})
export class UpperComponent {
    @ViewChild('contentWrapper') content: ElementRef;

    ngAfterViewInit() {
      console.debug(this.content.nativeElement);
    }
}
41
Günter Zöchbauer

https://angular.io/api/core/ContentChildren

class SomeDir implements AfterContentInit {

  @ContentChildren(ChildDirective) contentChildren : QueryList<ChildDirective>;

  ngAfterContentInit() {
    // contentChildren is set
  }
}

Console.log（contentChildren）を実行すると、ngAfterContentInit以降のイベントでのみ機能することに注意してください。

0
alansiqueira27