Angular 2親コンポーネントクラス呼び出し子コンポーネントメソッド
4396 ワード
ローカル変数
親コンポーネントのテンプレートでのみサブコンポーネントメソッドを呼び出す必要がある場合は、サブコンポーネントにローカル変数名を追加し、テンプレートでこの名前を使用して呼び出すことができます.親コンポーネントテンプレートサブコンポーネントのローカル変数名(#name)と呼び出しを追加
ViewChildとViewChildren
上記の別名メソッドでは、親コンポーネントのテンプレートでのみ呼び出され、親コンポーネントクラスではサブコンポーネントにアクセスできません.いくつかの制限があります.
親コンポーネントクラスで子コンポーネントメソッドにアクセスまたは呼び出す必要がある場合は、ViewChild、ViewChildrenを使用して子コンポーネントを親コンポーネントに注入する必要があります.
親コンポーネントテンプレート:
親コンポーネントクラス:
注入の属性はngAfterViewInitの後にしか使えないのも理解できますが、表示してからしか注入できないのでしょうか.
テキストリンク:https://www.pocketdigi.com/20170204/1556.html
親コンポーネントのテンプレートでのみサブコンポーネントメソッドを呼び出す必要がある場合は、サブコンポーネントにローカル変数名を追加し、テンプレートでこの名前を使用して呼び出すことができます.親コンポーネントテンプレートサブコンポーネントのローカル変数名(#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