Question

我对angular不熟悉，我正在学习Angular6。我了解ngModel。但是当我尝试ngModelChange时，提出了一些问题。

我有一个html元素 HTML

<input #input  type="text" [value]="name" [(ngModel)] ="name" (ngModelChange) ="change(input.value)"/>

打字稿

change(event :any) {
    this.name = event;
    console.log(this.name);
}

更改输入中的值后，我可以看到具有name属性的更改。

当我将html代码更改为

HTML

<input #input type="text" [value]="name"  [ngModel] ="name" 
(ngModelChange)="change(input.value)" />
{{ name }}

TS

change(event :any) {
    this.name = event;
    console.log(this.name);
}

它在控制台和UI中都能正常工作。

问题1

<input #input  type="text" [value]="name" [(ngModel)] ="name" 
(ngModelChange) ="change(input.value)"/>

＆

<input #input type="text" [value]="name"  [ngModel] ="name" 
(ngModelChange)="change(input.value)" />

是相同的吗？

问题2。

当我删除[ngModel]指令时。 ngModelChange没有被触发。必须具有[ngModel]吗？如果是，为什么？

HTML

<input #input type="text" [value]="name" 
(ngModelChange)="change(input.value)" />
<br/>
<br/>
{{ name }}

TS

change(event: any) {
     this.name = event;
     console.log(this.name);
 }

这将是一个很大的帮助。预先感谢。

Answer 1

当元素具有名为x的可设置属性和名为xChange的相应事件时，[（）]语法很容易演示。这是适合此模式的SizerComponent。它具有一个size值属性和一个伴随的sizeChange事件

https://angular.io/guide/template-syntax#basics-of-two-way-binding

所以，它们是等效的。

<input [(ngModel)]="name"/>
<input [ngModel]="name" (ngModelChange) ="name = $event"/>

但是，如果没有相应的属性，那么xChange将不起作用。

<input (ngModelChange) ="name = $event"/>

Answer 2

广告问题1） 它们与您编写的内容不同。撰写

<input [(ngModel)]="name" (ngModelChange)="change(input.value)"/>

如果只想设置变量值，

并没有任何意义，因为（banana-in-a-box）表达式[(ngModel)]本身只是它的语法糖

[ngModel]="name" (ngModelChange)="name = $event"

因此您的示例将导致：

<input [ngModel]="name" (ngModelChange)="name = $event" (ngModelChange)="change(input.value)"/>

广告问题2） 是的，您至少需要[ngModel]="name"表达式才能激活Angular指令。我们可以在Angular source本身的NgModel指令的选择器中看到它：

@Directive({
  selector: '[ngModel]:not([formControlName]):not([formControl])',
  providers: [formControlBinding],
  exportAs: 'ngModel'
})
export class NgModel extends NgControl implements OnChanges,
    OnDestroy {
    ...
    ...
    @Output('ngModelChange') update = new EventEmitter();
    ...

Answer 3

我想补充前面的答案，将[(ngModel)]（盒子里的香蕉）和(ngModelChange)混合在一起可以有一个用例，因为(ngModelChange)仍然会在香蕉放入后被解雇。一个盒子会更新您的模型。

例如，如果由于某种原因每次更改名称都想触发nameChange EventEmitter，则可以这样写

<input [(ngModel)]="name" (ngModelChange)="nameChange.emit(name)" />

快速的堆栈闪电演示了(ngModelChange)被触发时https://stackblitz.com/edit/angular-teu1am的模型已经更新

[ngModel]和（ngModelChange）如何一起工作？

3 个答案: