Anglar-装飾器-@View Child

コマンドは、ビュークエリの属性装飾器を構成し、検出器を変更してビューdomでセレクタにマッチする最初の要素または命令を検索します.ビューdomが変更され、新しいサブアイテムがセレクタにマッチする場合は、プロパティを更新します.source code:

export interface ViewChildDecorator {
     * Supported selectors include:
     *   * any class with the `@Component` or `@Directive` decorator
     *   * a template reference variable as a string (e.g. query ``
     * with `@ViewChild('cmp')`)
     *   * any provider defined in the child component tree of the current component (e.g.
     * `@ViewChild(SomeService) someService: SomeService`)
     *   * any provider defined through a string token (e.g. `@ViewChild('someToken') someTokenVal:
     * any`)
     *   * a `TemplateRef` (e.g. query `` with `@ViewChild(TemplateRef)
     * template;`)
    (selector: Type | Function | string, opts?: {
        read?: any;
    }): any;
    new (selector: Type | Function | string, opts?: {read?: any;}): ViewChild;
}

NgAfterViewInitコールバック関数を呼び出す前に、これらのビュークエリが設定されます.メタデータの属性:[selector]-クエリーに使用する命令の種類または名前.【read】−クエリーから他のトークンを読み出す.【static】−実行変更検出前に照会結果を解析するかどうか(すなわち、静的結果のみ).このオプションが提供されていない場合、コンパイラはクエリーの解析時間を決定するためにクエリーの結果を使用するデフォルトの動作に戻ります.クエリーの結果がネストビュー(例えば*ngif)にある場合、実行変更検出後にクエリーを解析します.さもないと、この問題は変更テストを実行する前に解決されます.
サポートされているセレクタには以下のものがあります.

@Componentまたは@Directive装飾器を有するクラス

文字列形式のテンプレート参照変数(例えば、@ViewChild('cmp')を使用して

を照会することができる.

コンポーネントツリー内の任意の現在のコンポーネントのサブアセンブリによって定義されるプロバイダー(例えば、@View Child(SomeService)someService:SomeService)

任意の文字列トークンによって定義されたプロバイダ(例えば@View Child('someToken')someTokenVal:any)

TemplateRef(例えば、@ViewChild(TemplateRef)templateを使ってもいいです.

を調べます.
使い方一:(selector:string)文字列形式のテンプレート参照変数アクセス要素@ViewChild('ContentElement') mainContent: ElementRef;は原生JSでdom元素を取って、document.getElement ById('元素ID')を使って、NGでnative Elementでdom元素オブジェクトを取得します.このdomオブジェクトを取得すると、好きなようにディスクを変更して、表示を表示します.HTML:

  【divContent】：dom  id
  【#TempContent】:a template reference variable as a string,      、doc    

TS:

export class AngularViewchildComponent implements OnInit, AfterContentInit {
  @ViewChild('ContentElement') mainContent: ElementRef;
  constructor() { }
  ngOnInit() {
    console.dir(this.mainContent.nativeElement);
    console.dir(document.getElementById('divContent'));
  }
  ngAfterContentInit(): void {
  }
}

モニタ結果:
使い方二:(selector:Type)@Componentまたは@Directive装飾器を含む任意の種類のアクセスサブアセンブリ
html数:

        ：

TS:

//       ：
@ViewChild(AngularViewchildcomponentComponent) childComponent: AngularViewchildcomponentComponent;
@ViewChild('NChildComponent') childComponentByName: AngularViewchildcomponentComponent;

ngAfterViewInit() {
    this.childComponent.changedNameByClass('  ');
    this.childComponentByName.changedNameByName('  ');
}

親のコンポーネントでサブアセンブリを操作する方法は、彼を強くディスクにしてもいいです.これは親ページでiframeオブジェクトを呼び出したのと同じです.今はiframeオブジェクトを取得しましたが、実際の使用ではどれぐらいの用途があるかはまだ分かりません.