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

Question

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

Answer 1

ngModel用于一种或两种方式的属性绑定。没错，您可以使用它来获取元素的当前值。

@ViewChild装饰器的不同之处在于，它用于获取组件或指令的第一个匹配实例。虽然您可以使用它来从该组件中获取价值，但不仅限于此。

Answer 2

NgModel

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

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

谁将坐在控制器中。

public myValue: string = 'hello;'

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

NgModel documentation

ViewChild

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

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

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

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

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

ViewChild documentation

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

Answer 3

NgModel用于输入，并且用于表单内，而Viewchild可用于指向页面上的组件/指令。

NgModel将为您提供给定表单字段的值

ViewChild允许您访问指向的组件的所有公共属性（值）和方法。