父 - 使用 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 { }

通过这种方式，你可以调用在子组件中定义的函数。

在呈现父组件之前，子组件不可用。在父母生活之前尝试接触孩子将导致异常。