Javascript 函数ngOnChanges（）在角度5中不起作用

每当组件生命周期或模板中的变量

this.test

发生更改但不起作用时，我尝试在Angular 5.x组件中调用函数

ngochanges（）

，但任何时候都不会调用

ngochanges（）

函数。有人能帮我吗

src/app.ts：

import {Component, NgModule, Input, OnChanges, SimpleChanges} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" placeholder="Test field" value="{{ test }}">
    </div>
  `,
})
export class App implements OnChanges {
  @Input() test: string;
  name: string;
  constructor() {
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges');

    if (changes.test && !changes.test.isFirstChange()) {
      // exteranl API call or more preprocessing...
    }

    for (let propName in changes) {
      let change = changes[propName];
      console.dir(change);
      if(change.isFirstChange()) {
        console.log(`first change: ${propName}`);
      } else {
        console.log(`prev: ${change.previousValue}, cur: ${change.currentValue}`);
      }
    }
  }


}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

从'@angular/core'导入{Component，NgModule，Input，OnChanges，SimpleChanges}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序实现OnChanges{
@Input（）测试：字符串；
名称：字符串；
构造函数（）{
}
ngOnChanges（更改：SimpleChanges）{
console.log（'ngOnChanges'）；
if（changes.test&！changes.test.isFirstChange（））{
//外部API调用或更多预处理。。。
}
for（让propName进行更改）{
让更改=更改[propName]；
console.dir（更改）；
if（change.isFirstChange（））{
log（`first change:${propName}`）；
}否则{
log（`prev:${change.previousValue}，cur:${change.currentValue}`）；
}
}
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

现场预览：

---

非常感谢

输入属性为父组件向子组件传递数据提供了一种机制。它们并不意味着将数据从模板传递到其组件

并且只有对父对象定义的输入属性的更改才能生成onChanges方法

我更新了plunker以修复缺少的FormsModule，并添加了一个子组件来演示如何使用input属性和onChanges生命周期挂钩：

子组件

@Component({
  selector: 'my-child',
  template: `
    <div>
      <input type="text" [(ngModel)]="test" placeholder="Test field">
    </div>
  `,
})
export class ChildComponent implements OnChanges {
  @Input() test: string;
  name: string;
  constructor() {  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('in ngOnChanges');
    if (changes.test && !changes.test.isFirstChange()) {
      // exteranl API call or more preprocessing...
    }

    for (let propName in changes) {
      let change = changes[propName];
      console.dir(change);
      if(change.isFirstChange()) {
        console.log(`first change: ${propName}`);
      } else {
        console.log(`prev: ${change.previousValue}, cur: ${change.currentValue}`);
      }
    }
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <my-child [test]='parentTest'></my-child>
      <button (click)='onClick()'>Change Value</button>
    </div>
  `,
})
export class App {
  parentTest: string;
  name: string;
  counter = 1;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  onClick() {
    this.parentTest = `test: ${this.counter}`;
    this.counter++;
  }
}

---

或者，您可以使用Sajeetharan的建议来捕获模板在其关联模板中的更改。它也会起作用。

这里您需要的是ngModelChange而不是ngOnChanges

<input type="text" placeholder="Test field" (ngModelChange)="printVal()">

---

ngOnChanges

在@input event emitter上工作

我在链接的插件中看到模板解析错误。它不喜欢你的

ngModel

用法你能帮我解决这个问题吗

<input type="text" placeholder="Test field" (ngModelChange)="printVal()">

printVal(){
  //detect model change here
}