☰

コンポーネントテンプレート内の要素を選択するにはどうすればよいですか? 質問する

tag-icon • tag-icon angular typescript angular-components
コンポーネントテンプレート内の要素を選択するにはどうすればよいですか? 質問する

コンポーネント テンプレートで定義された要素を取得する方法をご存知の方はいらっしゃいますか? 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

ベストアンサー1

ElementRefそこから注入して使用したり、類似のものを使用したりするのではなくquerySelector、宣言的な方法を使用してビュー内の要素に直接アクセスすることもできます。

<input #myname>

@ViewChild('myname') input;

要素

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

StackBlitzの例

  • @ViewChild()パラメータとしてディレクティブまたはコンポーネント型、あるいはテンプレート変数の名前 (文字列) をサポートします。
  • @ViewChildren()また、名前のリストをカンマ区切りのリストとしてサポートします (現在、スペースは使用できません@ViewChildren('var1,var2,var3'))。
  • @コンテンツ子()そして@コンテンツ子供()同じことを、ライト DOM (<ng-content>投影された要素) で実行します。

子孫

@ContentChildren()子孫のクエリも実行できる唯一のツールです

@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField;
`{descendants: true}` はデフォルトのはずですが、2.0.0 最終版には含まれておらず、[バグと見なされています](https://github.com/angular/angular/issues/11645#issuecomment-247650618)。 これは 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);
  }
}

任意の投影コンテンツを取得する

見るトランスクルージョンされたコンテンツにアクセスする

おすすめ記事