亲子组件沟通

Question

下文提到的从父组件更改子组件属性的方法中哪一种是好的？

任务：

我想在加载父组件时将类'md-show'从父组件添加到弹出模式组件中

@viewchild decorator

要么

document.querySelector()

Answer 1

如果你只有一个component弹出组件内。 您可以在弹出组件内部使用函数ngAfterViewInit 。 很简单 ：）

Answer 2

比使用@ViewChild更好的方法是：

1. 在您的ChildComponent中定义一个shouldAddClass属性，并使用@Input装饰器@Input装饰。
2. 在ChildComponent模板中使用[ngClass]或[class.md-show]将类添加到HTML元素中，具体取决于shouldAddClass的值
3. 在您的ParentComponent中，创建一个名为wasParentLoaded的属性，其类型为boolean，并将其初始设置为false 。
4. 在您的ParentComponent模板中，通过属性绑定语法将绑定wasParentLoaded与ChildComponent的shouldAddClass @Input属性一起使用。
5. 当父组件被加载时，它将触发AfterViewInit生命周期挂钩。 因此，在ParentComponent的ngAfterViewInit内部，您可以简单地将wasParentLoaded更改为true 。

这应该可以解决问题。

这是供您参考的示例StackBlitz 。

PS：这将在控制台上给您ExpressionChangedAfterItHasBeenCheckedError ，因为我们试图在Angular执行其更改检测时更改Component的属性。 但是仅在开发模式下。