javascript - 为什么 ngOnChanges() 函数没有在 Angular 2 中触发？

Question

请告诉我原因 ngOnChanges()函数没有在 angular2 中触发？ 我尝试更改 message属性(property)使用 @Input但 onchange 事件没有被触发。

这是我的代码 https://plnkr.co/edit/BOw5vazUUM8WNh9C1CNa?p=preview

export class Test implements OnInit,OnChanges{
  name:string;
  @Input() message;
  constructor() {
    console.log('==constructor==')
    this.name = 'Angular2'
  }
  ngOnInit(){
     // this.myService.someMethod() 
       console.log('==ngOnInit==')
   }

    ngOnChanges() {
        console.log('onChange fired');

    }
}

Answer 1

我猜你想在父级和子级之间绑定(bind)数据，当子级更改消息时，父级将收到更新的值。

这是演示:

app.ts

//our root app component
import {Component, NgModule,OnInit,OnChanges} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {Test} from './test';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}} from parent</h2>
      <test [(message)]="name"></test>
    </div>
  `,
})
export class App implements OnInit,OnChanges{
  name:string;
  constructor() {
    console.log('==constructor==')
    this.name = 'Angular2'
  }
  ngOnInit(){
     // this.myService.someMethod() 
       console.log('==ngOnInit==')
   }

    ngOnChanges() {
        console.log('onChange fired');

    }
}

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

测试.ts

import { Component, NgModule,OnInit,OnChanges,Input, Output, EventEmitter } from '@angular/core'

@Component({
  selector: 'test',
  template: `
    <div>
     {{message}}
     <input type="text" [ngModel]= "message" (ngModelChange)="onModelChange($event)"/>
    </div>
  `,
})
export class Test implements OnInit,OnChanges{
  name:string;
  @Input() message;

  @Output() messageChange = new EventEmitter('');
  constructor() {
    console.log('==constructor==')
    this.name = 'Angular2'
  }
  ngOnInit(){
     // this.myService.someMethod() 
       console.log('==ngOnInit==')
   }

    ngOnChanges() {
        console.log('onChange fired');

    }
  onModelChange(event) {
    this.message = event;

    this.messageChange.emit(this.message);
  }
}

演示:https://plnkr.co/edit/nU9Qkuf7bwgSga7Ce2Wc?p=preview

这是 Angular 中的自定义双向绑定(bind)。

<test [(message)]="name"></test>

等效:

<test [message]="name"(messageChange)="message = $event"></test>

其中 messageChange 是来自子组件的事件。