Angular 2親コンポーネントクラス呼び出し子コンポーネントメソッド

4396 ワード

ローカル変数
親コンポーネントのテンプレートでのみサブコンポーネントメソッドを呼び出す必要がある場合は、サブコンポーネントにローカル変数名を追加し、テンプレートでこの名前を使用して呼び出すことができます.親コンポーネントテンプレートサブコンポーネントのローカル変数名(#name)と呼び出しを追加
<app-header #header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" >app-header>
<button (click)="header.toggle()">       button>


ViewChildとViewChildren
上記の別名メソッドでは、親コンポーネントのテンプレートでのみ呼び出され、親コンポーネントクラスではサブコンポーネントにアクセスできません.いくつかの制限があります.
親コンポーネントクラスで子コンポーネントメソッドにアクセスまたは呼び出す必要がある場合は、ViewChild、ViewChildrenを使用して子コンポーネントを親コンポーネントに注入する必要があります.
親コンポーネントテンプレート:
<app-header #header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" >app-header>
<app-header #header2 [title]="title2" name="{{name}}" (checkEmitter)="onCheckedChange($event)" >app-header>
<button (click)="header.toggle()">             button>
<button (click)="headerToggle()">  ViewChild       button>

親コンポーネントクラス:
export class AppComponent implements AfterViewInit{
  title="  ";
  title2="  2";
  name="  111";
  //              
  @ViewChild(HeaderComponent)
  private header1:HeaderComponent;

  //           ,           
  @ViewChild('header2')
  private header2:HeaderComponent;
  //     ViewChildren           
  @ViewChildren(HeaderComponent)
  private headers: QueryList;

  ngAfterViewInit() {
    console.log(this.header1.isChecked);
    console.log(this.header2.isChecked);
    this.headers.forEach((child) => { console.log(child.title) });

  }
  onCheckedChange(isChecked:boolean) {
    console.log("checkbox    :"+isChecked);
  }

  headerToggle() {
    this.header1.toggle();
  }
}

注入の属性はngAfterViewInitの後にしか使えないのも理解できますが、表示してからしか注入できないのでしょうか.
テキストリンク:https://www.pocketdigi.com/20170204/1556.html