亲子组件沟通

Question

下面提到的从父组件更改子组件属性的方法中哪个好？

任务：

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

@viewchild decorator

或

document.querySelector()

Answer 1

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

Answer 2

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

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

这应该可以解决问题。

这是您推荐的Sample StackBlitz。

PS：，这将为您提供控制台上的ExpressionChangedAfterItHasBeenCheckedError，因为我们试图在Angular执行其更改检测时更改组件上的属性。不过仅在开发模式下。