父 - 使用 ViewChild 進行子互動

Viewchild 提供從父母到孩子的單向互動。使用 ViewChild 時，沒有來自子項的反饋或輸出。

我們有一個顯示一些資訊的 DataListComponent。DataListComponent 具有 PagerComponent 作為它的子級。當使用者在 DataListComponent 上進行搜尋時，它從服務獲取資料並要求 PagerComponent 根據新的頁面數重新整理分頁佈局。

import { Component, NgModule, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataListService } from './dataList.service';
import { PagerComponent } from './pager.component';

@Component({
    selector: 'datalist',
    template: `<input type='text' [(ngModel)]="searchText" />
               <button (click)="getData()">Search</button>
        <table>
        <tr *ngFor="let person of personsData">
            <td>{{person.name}}</td>
            <td>{{person.surname}}</td>
        </tr> 
        </table>

        <pager></pager>
    `
})
export class DataListComponent {
    private personsData = null;
    private searchText: string;

    @ViewChild(PagerComponent)
    private pagerComponent: PagerComponent;

    constructor(private dataListService: DataListService) {}
    
    getData(){
        var response = this.dataListService.getData(this.searchText);
        this.personsData = response.data;
        this.pagerComponent.setPaging(this.personsData / 10); //Show 10 records per page
    }
}

@NgModule({
    imports: [CommonModule],
    exports: [],
    declarations: [DataListComponent, PagerComponent],
    providers: [DataListService],
})
export class DataListModule { }

通過這種方式，你可以呼叫在子元件中定義的函式。

在呈現父元件之前，子元件不可用。在父母生活之前嘗試接觸孩子將導致異常。