[ngModel] 和 (ngModelChange) 如何协同工作？答案

【问题标题】：How [ngModel] and (ngModelChange) work together?[ngModel] 和 (ngModelChange) 如何协同工作？
【发布时间】：2020-01-14 01:11:42
【问题描述】：

我是 Angular 新手，我正在学习 Angular 6。我了解 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);
}

更改 input 中的值后，我可以通过 name 属性看到更改。

当我将html代码更改为

HTML

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

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

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

问题一

<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 }}

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

这将是一个很大的帮助。提前致谢。

【问题讨论】：

标签： angular typescript

【解决方案1】：

当元素具有名为 x 的可设置属性和名为 xChange 的相应事件时，[()] 语法很容易演示。这是一个适合这种模式的 SizerComponent。它有一个大小值属性和一个伴随的 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"/>

【讨论】：

【解决方案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();
    ...

【讨论】：

<input [(ngModel)]="name" (ngModelChange)="doSomethingElse($event)"/> 我认为如果您想更新值以及对更改执行一些其他操作，则需要此语法。就像在其他数组中查找一样。

【解决方案3】：

我想补充一下之前的答案，即混合[(ngModel)]（盒子里的香蕉）和(ngModelChange) 可以有一个用例，因为在盒子里的香蕉更新您的模型后，(ngModelChange) 仍然会被触发。

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

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

快速堆栈闪电战以证明模型在(ngModelChange) 被触发时已经更新：https://stackblitz.com/edit/angular-teu1am

【讨论】：