将数据从父组件传递到子组件答案

【问题标题】：Passing data from Parent Component to Child Component将数据从父组件传递到子组件
【发布时间】：2019-02-27 20:22:34
【问题描述】：

我是 Angular 的新手。我想将数据从父组件传递到子组件。实现此目的的一种方法是使用@input() Decorator。今天我遇到了另一种方法。也就是说，使用@ViewChild 获取子组件的本地引用并将属性分配给它的实例。这是传递数据的正确方法吗？

【问题讨论】：

请看一下这个：- stackoverflow.com/a/51384602/767625
你可以这样做：stackoverflow.com/questions/52382447/…
@JacopoSciampi 谢谢先生。是的，这是另一种方式。但是请让我知道下面的代码是否正确？它工作正常。 @ViewChild('employeeComponent') 雇员：雇员组件； this.employee.newProperty = {};

标签： angular

【解决方案1】：

一般来说，如果你不是绝对需要它，你应该更喜欢使用 @Input() 装饰器并使用它将值传递给子组件。

@ViewChild 引用通常用于需要调用某些组件的方法而不仅仅是更新属性值的情况。它为您提供了更大的灵活性。

另外，在变更检测方面，使用@Input 效率更高。特别是如果您使用ChangeDetectionStrategy.OnPush。这样 Angular 就知道它需要检测更改的唯一时间是 @Input 更改时。

撇开变更检测不谈，使用ViewChild() 更新属性根本不是一种常见的做法，而且这样的代码可能不太容易理解和健壮。

如果您只需要将值从父组件传递给子组件，您绝对应该使用@Input。

【讨论】：

【解决方案2】：

两种方式都有效。但是，使用@Input 可以更清楚地表明它是一个输入。这可能不是您需要的东西，但可能对其他开发人员非常有用。

使用@ViewChild 可以获得对该组件的引用。当然你可以设置一个属性，但是如果你有一个@Input，你为什么要设置一个属性。但是您可以使用@ViewChild 调用方法。

虽然使用它是完全有效的，但我尽量避免使用它，因为它并不总是非常直观。

【讨论】：