angular - #something ="ngModel"的简单英语

Question

基于https://stackblitz.com/edit/angular-m2tkrf?file=src%2Fapp%2Fhero-form%2Fhero-form.component.html ，稍作修改:

.ts

export class page
{
  model = {mm: "Inside model"}; // my understanding is 'model' is not a required object for binding.
  X = "xxx";  // wired with display via [(ngModel)]="X"
  Y = "yyy";     
  mm="Outside of model";
}

.html

Binding: 
        <input type="text"
               required name="bogus123"
               [(ngModel)]="X"
               #Y="ngModel">
        <div [hidden]="Y.valid || Y.pristine">
          A value is required
        </div>
        <div>
          X value ="{{X}}"
        </div>

效果很好

这是我的理解:

required name="bogus123"是 input 标记的 HTML 属性，无论接下来的内容是什么 <div> ，不在讨论范围内。

[(ngModel)]="X"表示将此输入框与名为 X 的局部变量进行 2 路绑定(bind).ts 内

想法#X="ngModel"是将这个输入框与变量 X 连接起来的另一种方法在 .ts 中，但是得到

"Cannot assign to a reference or variable!"

替换 Y与 mm在 .html 中有效。已经研究过这两个SO What is the difference between the #name and [(ngModel)]="name" in Angular2 Form input?

Angular 2 bind HTML inputs to component variables like in Vue?

谁能解释一下什么是#something="ngModel"用简单的英语没有“指令”和“组件”？

Answer 1

首先，#X="ngModel"是不是另一种将 ngModel 绑定(bind)到 .ts 中的局部变量 X 的方法.

TLDR:它将绑定(bind) Angular 指令 ngModel 的实例到一个新的模板变量 X这与你的.ts无关多变的。模板变量仅在 .html 中可用。您的组件的(除非您使用 @ViewChild 或类似的内容来获取 .ts 中的引用)。

所以当你尝试时:

<input type="text"
    required name="bogus123"
    [(ngModel)]="X"
    #X="ngModel">

您收到此错误:Error: Cannot assign value "$event" to template variable "X". Template variables are read-only.

您创建一个新的模板变量X保存指令 NgModel 的实例。然后 Angular 尝试对这个新模板变量 X 进行双向绑定(bind)并且不会让你因为你无法重新分配模板变量。它们是只读的。

#something的解释语法

语法#something用于获取对模板中某些元素或组件的引用。它绑定(bind)变量 something到它所应用到的元素，而不是相反。

如果元素是组件 ( <app-child #something></app-child> )，则模板变量 something将被分配组件的实例ChildComponent 。如果你已经有一个变量something在你的.ts ，模板中的变量不会修改它。相反，会创建一个同名的新变量，从而隐藏其他变量。 Angular 优先考虑模板变量而不是组件中的变量。

类似地，如果该元素是基本 html 元素 ( <input type="text" #myInput )，则变量 myInput将被分配给HTMLInputElement .

示例:

您有一个组件应用子级:

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<span *ngIf="expanded">Hello world!</span>'
})
export class ChildComponent {
  expanded = false;

  toggle() {
    this.expanded = !this.expanded;
  }
}

现在在您的应用程序组件模板中:

<div>
  <app-child #child></app-child>
  <button type="button" (click)="child.toggle()">Toggle</button>
</div>

<div>
  <input type="text" #input value="Input test" />
  <button type="button" (click)="input.select()">Select input text</button>
</div>

现在 #something="ngModel"语法

当您通常无法获取指令时，此语法允许您获取对指令而不是组件的引用。

如果您的应用程序组件模板中有如下内容:

<app-child #var appMy></app-child>

现在var将保留您的ChildComponent组件实例，但假设您想要引用 MyDirective (appMy)？这就是您需要不同语法的地方。

要获取指令的引用，您需要添加 exportAs首先:

@Directive({
  selector: '[appMy]',
  exportAs: 'myDirective' // <-- Added exportAs here
})
export class MyDirective {}

现在是exportAs告诉 Angular 你的指令将在 myDirective 下可用现在您可以这样做来获取引用:

<app-child #var="myDirective" appMy></app-child>

var现在将保存 MyDirective 的实例而不是AppChildComponent .

如果你检查 ngModel directive 的源代码，可以看到导出为ngModel :

@Directive({
  selector: '[ngModel]:not([formControlName]):not([formControl])',
  providers: [formControlBinding],
  exportAs: 'ngModel'
})
export class NgModel

这是一个包含其中一些示例的 stackblitz:https://stackblitz.com/edit/angular-ivy-pagmze