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

Question

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

Answer 1

通常，如果您不是绝对需要它，则应该使用@Input()装饰器，然后使用它将值传递给子组件。

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

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

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

在仅需要将值从父组件传递到子组件的情况下，您绝对应该使用@Input。

Answer 2

两种方法均有效。但是，使用@Input可以使它更加清楚，它是一种输入。这可能不是您需要的，但是对其他开发人员可能非常有用。

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

尽管使用它是完全有效的，但我尝试尽可能避免使用它，因为它并不总是很直观。