ngOnChanges Angular 不适用于双向数据绑定 [(ngModel)]

Question

ngOnChanges在使用ngModel更改用户属性时不会触发，这对我来说很奇怪，因为我使用过vue js和计算方法，我想这里也是一样的。

组件

import { Component, OnChanges } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnChanges {
title = 'app';
user = '';
ngOnChanges(): void {
console.log('user changed !');
}
}

视图

<input type="text"
name="user"
id="user"
[(ngModel)]='user'>

<p>{{user}}</p>

Answer 1

IMOngOnChanges仅在Input属性更改来自模板绑定(例如(时运行

<component [inputBinding]="someValue">

并且不会像上面所做的那样使用双向数据绑定。

Answer 2

ngOnChanges仅在父组件的输入发生更改时调用。根据您的需求，您需要在输入上实现一个更改事件侦听器。例如

<input type="text"
name="user"
id="user"
[(ngModel)]='user'
(input)="inputChange(event)">

这里inputChange是每次用户输入内容时都会调用的函数。有关更多详细信息，您可以查看Angular关于输入元素事件的官方文档-https://angular.io/guide/event-binding

Answer 3

[(ngModel)]仅在模块中导入FormsModule时有效。我认为，你没有进口它&试图访问它，这就是为什么在输入更改时HTML templete中用户值不会发生更改的原因。

ngOnChanges是一个生命周期挂钩，每当组件或指令的输入属性更改时都会调用。我不会在[(ngModel)]上被调用，如果你想触发ngModel的更改，你可以在输入元素上这样使用ngModelChange

<input type="text" name="user" id="user" [(ngModel)]='user' (ngModelChange)="onInputChange($event)" />

如果要在HTML模板中打印用户值，可以直接编写<p>{{user}}</p>&当你打字时，它会自动改变。在这种情况下，您不需要使用ngModelChange。

有关更多信息，请阅读文档https://angular.io/api/core/OnChanges