I have mat-paginator
在子组件a中,如下所示:
子组件.html
<mat-paginator #paginator></mat-paginator>
我想使用从父组件获取此分页器@ViewChild()
如下所示:
父组件.html
<child
<!-- code omitted for simplicity -->
>
</child>
***parent.component.ts***
@ViewChild('paginator') paginator: MatPaginator;
resetPaginator() {
this.paginator.firstPage();
}
But as this.paginator
未定义,我无法访问子组件中的分页器。我不确定如何从父级访问分页器。一种方法可能是使用以下方法,但如果有一种优雅的方法,我会更喜欢它。任何想法?
@ViewChild(ChildComponent) child: ChildComponent;
Friedrich,父级只能访问“子级”(但如果可以访问子级,则可以访问子级的所有属性和功能)。所以在你的child你声明
//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()
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)