父-子组件通信

Question

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

任务：

加载父组件时，我希望将类'md-show‘添加到我的弹出模式组件中。

@viewchild decorator

或

document.querySelector()

Answer 1

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

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

这应该能起作用。

这是一个供您参考的Sample StackBlitz。

PS:，这将给您控制台上的ExpressionChangedAfterItHasBeenCheckedError，因为我们试图更改组件上的一个属性，而角形正在执行它的变化检测。只是在发展模式下。

Answer 2

如果在弹出组件中只有一个component。您可以在弹出组件中使用函数ngAfterViewInit。非常简单:)