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中的按钮。如何做到这一点？

- xiotee

---

这是plkr链接：https://plnkr.co/edit/8LqSzJT73AkSpYjpTVKv?p=catalogue - xiotee

如果BeetleJuice的答案对您不可行，并且如果您想直接与ChildComponent交互而不是首先通过ParentComponent传递，则我只能想到通过ElementRef访问它并手动更改属性。不过这种方法解决方案非常粗糙。 https://plnkr.co/edit/CfspDAbXHhSi7COsO9Lt?p=preview - Adrian

顺便问一下，难道你不能先回到“父组件”吗？比如从“祖先组件”触发事件，然后“父组件”接收它，最后传递给“子组件”？ - Adrian

Answer 1

我会用一个服务来做这个。该服务将会：

• 暴露一个可观察对象，当控件需要禁用/启用时就会发出信号
• 暴露一个函数，应该调用该函数以使可观察对象发出信号

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

• 孙子订阅可观察对象onInit
• 祖父母调用该函数
• 函数导致可观察对象发出信号
• 孙子接收信号并禁用/启用其控件

回答您的评论，以下是两种替代方案我不推荐使用

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

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

再次说明，我不建议其中任何一种选项，但它们是可行的。

- BeetleJuice

---

有没有其他的替代方法，可以让您直接访问到孙子按钮本身？ - xiotee

@xiotee 我在我的回答中添加了一个部分。 - BeetleJuice

备选方案1并不理想，但至少在某种程度上还算可以接受。然而，将东西写到全局窗口变量中... - gyohza