Question

以下两个语句中模板变量spy和name之间有什么区别？间谍代表什么，名称代表什么。代码来自关于Angular的以下教程。

https://angular.io/docs/ts/latest/guide/forms.html

<input type="text" class="form-control" id="name"
  required
  [(ngModel)]="model.name" name="name"
  #spy>
<br>TODO: remove this: {{spy.className}}
spy is assigned value of control which represents the input.



<input type="text" class="form-control" id="name"
               required
               [(ngModel)]="model.name" name="name"
               #name="ngModel">

我认为spy代表NgForm中的FormControl来表示输入元素。使用spy，我可以访问FormControl的属性（例如spyu.className）。但是我无法理解name是否也是一个FormControl，以及如何为它赋值＆＃34; ngModel＆＃34;使它与间谍不同

Answer 1

间谍代表什么

当您像[main ] Process started [thread1 ] Thread started [thread2 ] Thread started [thread1 ] Thread ended [thread1 ] Thread started [thread2 ] Thread ended [thread2 ] Thread started [thread1 ] Thread ended [thread2 ] Thread ended [thread3 ] Thread ended [thread4 ] Thread ended [thread5 ] Thread ended [main ] Process ended一样指定模板引用时，它默认引用组件/指令类中的ElementRef和模板中的本机DOM元素。 #some-name是本机DOM元素的包装器，您可以阅读更多相关信息here。 ElementRef是一个标准DOM API，它是附加到元素的所有类的字符串。

如果它在子组件上单独使用，则默认情况下引用组件实例。

名称代表什么

当您在className格式中指定模板引用时，它会引用名称为#some-name="other-name"的指令。所以在你的情况下：

other-name

它在此输入控件上引用#name="ngModel"指令实例。

我认为间谍代表NgForm中的FormControl 代表输入元素。

不，正如我之前解释的那样，它代表NgModel。要通过模板引用访问表单控件，您必须使用FormControlDirective并使用模板引用，如下所示：

ElementRef

由于此指令的定义如下：

<input #spy="ngForm" [formControl]="control">

但是，由于您已经可以访问组件@Directive({selector: '[formControl]', providers: [formControlBinding], exportAs: 'ngForm'}) ---------------------------------------- ^^^^^^^^^ export class FormControlDirective extends NgControl implements OnChanges {值中的表单控件，因此没有多大意义。

访问Angular 2中的FormControl

1 个答案: