angular - 何时使用 ViewChild 和 NgModel，它们有何不同？

Question

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

Answer 1

吴型号

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

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

它将坐在 Controller 中。

public myValue: string = 'hello;'

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

NgModel documentation

查看 child

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

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

然后在你的 Controller 中你可以定义。

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

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

ViewChild documentation

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