Angular 2 - 孙子访问

Question

如何访问孙组件？ 例如，我有一个 grandparent.component.ts、parent.component.ts 和 child.component.ts。 child.component.ts 在其模板中有一个按钮列表。 parent.component.ts 包含 child.component.ts。 grandparent.component.ts 包含 parent.component.ts。我想在 grandparent.component.ts 中禁用 child.component.ts 中的按钮。我该怎么做？

Answer 1

我会通过服务来做到这一点。该服务将：

• 公开一个在禁用/启用控件时发出的 observable
• 公开一个应该被调用以使 observable 发射的函数

祖父母禁用孙子控件的事件顺序为：

• 孙子订阅了可观察的onInit
• 祖父调用函数
• 函数导致 observable 发射
• 孙子接收发射，并禁用/启用其控件

根据您的评论，这里有两种选择，我不推荐

1. 您可以在父组件中使用@Input()，在祖父模板中使用数据绑定来将值从祖父传递给父，并使用相同的机制——子组件中的@Input()和父模板中的数据绑定——将父级的数据绑定属性传递给子级。

2. 祖父母可以将值写入window 对象，因为所有组件都可以看到它。例如：window.enableControls = false。 Child 可以有一个 setInterval 或 Observable.interval 每 500 毫秒读取一次该值并更新子控件。清除the child component is destroyed时的间隔，否则会出现内存泄漏。

同样，我不会推荐任何一种选择，但它们会起作用。