父子组件通信答案

【问题标题】：Parent-Child Component communication父子组件通信
【发布时间】：2018-10-13 13:59:54
【问题描述】：

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

任务：

当父组件加载时，我想从父组件向弹出的模态组件添加类 'md-show'

@viewchild decorator

或

document.querySelector()

【问题讨论】：

标签： angular

【解决方案1】：

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

在您的 ChildComponent 中定义 shouldAddClass 属性并使用 @Input 装饰器对其进行装饰。
在您的 ChildComponent 模板中使用 [ngClass] 或 [class.md-show] 根据 shouldAddClass 的值将类添加到您的 HTML 元素中
在您的 ParentComponent 中，创建一个名为 wasParentLoaded 的布尔类型属性，并将其最初设置为 false。
在您的 ParentComponent 模板中，通过 Property Binding Syntax 将 wasParentLoaded 与 ChildComponent 的 shouldAddClass @Input 属性结合使用。
当父组件被加载时，它的 AfterViewInit 生命周期钩子会被触发。所以在ParentComponent的ngAfterViewInit里面，你可以简单的把wasParentLoaded改成true。

这应该可以解决问题。

这里有一个Sample StackBlitz 供您参考。

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

【讨论】：

【解决方案2】：

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

【讨论】：