时间戳

首页 > 解决方案 > Angular：使用 ViewChild 访问孙子和嵌套组件方法

angular - Angular：使用 ViewChild 访问孙子和嵌套组件方法

问题描述

有没有办法用 ViewChild 控制孙子和嵌套组件？我需要从顶层访问/运行孙子组件中的公共方法。它似乎对我不起作用。暂时不要使用服务或输入/输出。

它对我有用，仅适用于直接子组件。

资源：

https://angular.io/api/core/ViewChild

标签： angulartypescriptangular8viewchildangular10

解决方案

即使您说您宁愿不使用服务，这也可能是您的最佳选择。

您可以遵循此解决方案。

使用@ViewChild，您可以按照本指南操作，孙组件位于祖父组件中。

@Output否则，您可以使用装饰器创建从孙子到父母，然后从父母到祖父母的“桥梁” 。

子组件公开了一个 EventEmitter 属性，当发生某些事情时它会使用该属性发出事件。父级绑定到该事件属性并对这些事件作出反应。孩子的 EventEmitter 属性是一个输出属性，通常用 @Output 装饰

资源

例子：

祖父母：

<parent (notifyGrandparent)="GrandparentHandle($event)">
</parent>
 ///ts
GrandparentHandle(event){
// do needed work
}

家长：

<child (handleNotif)="childEvent($event)">
</child>
@Output() notifyGrandparent= new EventEmitter();
childEvent(event) {
  this.notifyGrandparent.emit('event')
}

孩子：

@Output() handleNotif = new EventEmitter
onNotify() {
  this.handleNotif.emit('notify everyone')
}

资源

您可以按照本指南进行组件交互，并使用完整的 stackblitz 示例。

此外，您可以阅读有关组件交互的此线程

而这个使用的例子@viewChildren，更有趣......

推荐阅读