模板引用变量(#)与[(ngModel)]之间的区别是什么

Question

我正在阅读教程和文档，但我不理解Template reference variables的概念。我们有用于双向绑定的NgModel，但为什么我们在Angular中使用Template reference variables？

Answer 1

它们都是Angular中的通信方式。

Ngmodel通常用于模板输入之间的通信(单向或双向(，

<input class="input-box" ([NgModel])]="value">

ViewChild或ViewChildren通常用于与自定义组件进行通信。如果您需要使用jQuery或外部库来实际引用本机元素，也可以使用ViewChild在本机元素上使用(实现stripe在本机元件上使用此功能(。你也经常会在angular库中遇到这种情况，比如ng-bootstrap或angular material。它们将使用这些模板引用来绑定组件。

<custom-component #ref></custom-component>

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

@ViewChild('ref')public customComponent; 
or
@ViewChild('nativeRef')public component: ElementRef; 

Answer 2

[(ngModel(]是一个双向数据绑定。任何来自前端或后端的数据更改都会反映到这两个部分，具体取决于您如何调用它们以及何时调用。根据控制流语句和函数调用。

模板引用变量(#(是一个变量，可以在页面中的任何位置使用它来引用其他DOM元素的值。