[解決済み] コンポーネントテンプレートで要素を選択するには？

質問

コンポーネントテンプレートで定義された要素を取得する方法をご存知の方はいらっしゃいますか？Polymerでは $ と $$ .

Angularではどうなんだろうと思っていたところです。

チュートリアルの例を見てみましょう。

import {Component} from '@angular/core';

@Component({
    selector:'display',
    template:`
     <input #myname (input)="updateName(myname.value)"/>
     <p>My name : {{myName}}</p>
     `   
})
export class DisplayComponent {
    myName: string = "Aman";
    updateName(input: String) {
        this.myName = input;
    }
}

をキャッチホールドしたり、参照を取得するにはどうすればよいのでしょうか？ p または input 要素をクラス定義内から呼び出すことはできますか？

どのように解決するのですか？

を注入する代わりに ElementRef を使用し querySelector などを使えば、ビューの要素に直接アクセスする代わりに、宣言的な方法を使うことができます。

<input #myname>

@ViewChild('myname') input; 

要素

ngAfterViewInit() {
  console.log(this.input.nativeElement.value);
}

StackBlitzの例

• ビュー子() は、パラメータとしてディレクティブやコンポーネントタイプ、またはテンプレート変数の名前(文字列)をサポートします。
• ViewChildren() は、カンマ区切りの名前のリストもサポートしています (現在、スペースは使用できません)。 @ViewChildren('var1,var2,var3') ).
• コンテンツチャイルド(ContentChild) と コンテンツチルドレン() は、同じようにライト DOM ( <ng-content> が投影された要素)。

子孫

@ContentChildren() は、子孫のクエリも可能な唯一のものです。

@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField; 

<ストライク {descendants: true} はデフォルトであるべきですが、2.0.0 final ではそうなっておらず、これは バグと思われるもの
これは2.0.1で修正されました

読む

コンポーネントとディレクティブがある場合 read パラメータで、どのインスタンスを返すかを指定することができます。

例えば ViewContainerRef これは、動的に作成されるコンポーネントで必要となる、デフォルトの ElementRef

@ViewChild('myname', { read: ViewContainerRef }) target;

サブスクライブチェンジ

ビューの子プロセスが設定されるのは ngAfterViewInit() が呼び出されたときのみ、コンテンツの子が設定されます。 ngAfterContentInit() が呼び出された場合、クエリ結果の変更を購読したい場合は ngOnInit()

https://github.com/angular/angular/issues/9689#issuecomment-229247134

@ViewChildren(SomeType) viewChildren;
@ContentChildren(SomeType) contentChildren;

ngOnInit() {
  this.viewChildren.changes.subscribe(changes => console.log(changes));
  this.contentChildren.changes.subscribe(changes => console.log(changes));
}

DOMダイレクトアクセス

は DOM 要素のみを問い合わせることができ、 コンポーネントやディレクティブのインスタンスは問い合わせることができません。

export class MyComponent {
  constructor(private elRef:ElementRef) {}
  ngAfterViewInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }

  // for transcluded content
  ngAfterContentInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }
}

任意に投影されたコンテンツを取得する

参照 アクセスしたコンテンツが含まれている