如何在 Angular 中从父组件访问子组件？

Question

我的mat-paginator子组件如下所示：

子组件.html

<mat-paginator #paginator></mat-paginator>

我想使用@ViewChild()如下所示从父组件获取此分页器：

父组件.html

<child 
    <!-- code omitted for simplicity -->
>
</child>

***父组件.ts***

@ViewChild('paginator') paginator: MatPaginator;

resetPaginator() {          
    this.paginator.firstPage();
}

但由于this.paginator未定义，我无法访问子组件中的分页器。我不确定如何从父级访问分页器。一种方法可能是使用以下方法，但如果有一种优雅的方法，我会更喜欢它。任何想法？

@ViewChild(ChildComponent) child: ChildComponent;

Answer 1

Friedrick，父级只能访问“子级”（但如果可以访问子级，则可以访问子级的所有属性和功能）。所以你在你的孩子身上宣告

//in CHILD, so this variable can be access from parent
@ViewChild('paginator') paginator: MatPaginator;

在父项中你有一个

@ViewChild('child') child: ChildComponent;

你会像往常一样得到“孩子的分页器”

this.child.paginator.firstPage();

请注意，您还可以向子级添加模板引用并避免声明 viewChild

<child-component #child..></child-component>
<button (click)="child.paginatorfirstPage()">first</button>
<button (click)="doSomething(child)">something</button>
doSomething(child:any)
{
    child.paginator.lastPage()
}