Question

我想知道在视图中是否修改了对象myObject，为此我正在使用ngOnChanges。

这是我的HTML

  <form class="inputForm">
    <table id="inputFormTable">
      <tr>
        <td><label>login</label></td>
        <td><input type="text" size="40" [(ngModel)]="myObject.value1" name="value1"/></td>
      </tr>
      <tr>
        <td><label>Mot de passe</label></td>
        <td><input type="password" size="40" [(ngModel)]="myObject.value2" name="value2"/></td>
      </tr>
    </table>

这是我使用ngOnChanges的组件

import {Component, OnInit, OnChanges, SimpleChanges, Input} from '@angular/core';
export class UtilisateurComponent implements OnInit, OnChanges {
  @Input() myObject: any= {actif: false};
  ngOnChanges(changes: SimpleChanges): void {
    for (let propName in changes) {
      let chng = changes[propName];
      let cur = JSON.stringify(chng.currentValue);
      let prev = JSON.stringify(chng.previousValue);
      console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
    }
  }
}

当myObject属性（value1和value2）发生变化时，我想触发ngOnChanges。但是到目前为止我做了什么，我无法这样做。在此先感谢您的帮助！

Answer 1

在输入上使用（ngModelChange）：

<input type="text" size="40" [(ngModel)]="myObject.value1"  (ngModelChange)="yourCustomMethod($event)" name="value1"/>

<强> ngOnChanges 只有当父组件更改了myObject输入的对象引用时，框架才会调用该方法。

Answer 2

当组件的ngOnChanges值发生变化时，使用

@Input。根据我对您的代码的理解，您需要ngModelChange。

Answer 3

ngOnChanges仅在myObject的值更改时调用，但在您的情况下不会更改。你想要的是ngModelChange：

<input [(ngModel)]="myObject.value1" (ngModelChange)="value1Changed()"/>

value1Changed是组件的方法。

Answer 4

检测仅针对输入的更改时，

ngModelChanges是最佳选择，但如果您想在整个应用中检测到这些更改：

import {Component, OnInit, DoCheck, SimpleChanges, Input} from '@angular/core';
export class UtilisateurComponent implements OnInit, DoCheck {
  @Input() myObject: any= {actif: false};
  ngDoCheck(): void {
    for (let propName in changes) {
      let chng = changes[propName];
      let cur = JSON.stringify(chng.currentValue);
      let prev = JSON.stringify(chng.previousValue);
      console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
    }
  }
}

Answer 5

仅当父组件的绑定属性更改并且使用此更改的值更新子组件的属性时，才会触发

ngOnChanges挂钩。 Read more here

要在模型属性发生变化时收到通知，您需要使用ngModelChange这样的事件：

<input [(ngModel)]="myObject.value1" (ngModelChange)="value1Changed()"/>

检测物体角度变化2

5 个答案: