为什么ngOnChanges（）函数未在角度2中触发？

Question

请问，请告诉我为什么ngOnChanges()函数没有在angular2中触发？ 我试图使用@Input更改message属性，但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

我猜你是想父母和孩子之间的数据绑定，当孩子变message，家长会收到更新后的值。

这是演示：

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

test.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中绑定。

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

当量：

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

其中messageChange是从子组件中的事件。