什么时候使用ViewChild和NgModel，它们有什么不同？

Question

我对 ViewChild 和 NgModel 有点困惑。谁能给我关于何时使用 Viewchild 和 ngModel 的明确答案？我知道两者都会指向一个特定的元素，你可以使用这些对象来获取元素的当前值。

Answer 1

模型

NgModel 是一种双向数据绑定的方式，可以在您的模板和控制器中使用，如果其中一个值发生更改，它将反映另一个。一个非常常见的用途是输入框看起来像这样。

<div>
    <input class="input-box" ([NgModel])]="myValue">
</div>

这将坐在控制器中。

public myValue: string = 'hello;'

如果这是由用户从输入框中输入，则变量 myValue 会反射性地改变。如果在模板中您像这样更改值。this.myValue = 'goodbye''这将在文本框中更改。

NgModel 文档

视图子项

viewchild 可以用来获取模板元素的引用，所以你可以看到所有关联的属性。一个常见的例子是，如果模板中有一个自定义组件，则可以在需要时使用 ViewChild 从该组件中提取值。看起来大致如此。

<my-custom-component #reference></my-custom-component>

然后在你的控制器中你可以定义。

@ViewChild('reference')public myComponent; // type being the class of the child / element.

这将允许您访问子组件中的所有内容。我认为您进行比较的原因是您可以使用输入框执行此操作并提取其值。

ViewChild 文档

两者都是具有不同应用程序的非常有用的工具。对于使用 NgModel 的通用双向数据绑定，为了获得对模板元素/组件的引用，我会坚持使用 ViewChild。