本地變數

若只需要在父元件的模板中呼叫子元件方法，可以給子元件新增一個本地變數名，在模板中使用該名稱呼叫。
父元件模板增加子元件的本地變數名(#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<HeaderComponent>;

  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後才能使用，這也好理解，只有顯示了以後，才能注入嘛。