Javascript 为什么ngOnChanges（）函数没有在angular 2中激发？

您能告诉我为什么在angular2中没有启动

ngOnChanges（）

函数吗？ 我试图使用

@Input

更改

消息

属性，但未触发onchange事件

这是我的密码

---

我猜您想在父级和子级之间绑定数据，当子级更改

消息时，父级将收到更新的值

这是演示：

应用程序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 {}

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);
  }
}

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，OnInit，OnChanges}；
从“@angular/platform browser”导入{BrowserModule}；
从'@angular/forms'导入{FormsModule}；
从“./Test”导入{Test}；
@组成部分({
选择器：“我的应用程序”，
模板：`
您好{{name}}来自家长
`,
})
导出类应用程序实现OnInit、OnChanges{
名称：字符串；
构造函数（）{
console.log（'==构造函数=='）
this.name='Angular2'
}
恩戈尼尼特（）{
//this.myService.someMethod（）
console.log（'==ngOnInit='）
}
ngOnChanges（）{
log（'onChange-fired'）；
}
}
@NGD模块({
导入：[BrowserModule，FormsModule]，
声明：[应用程序，测试]，
引导：[应用程序]
})
导出类AppModule{}

测试.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 {}

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);
  }
}

import{Component，NgModule，OnInit，OnChanges，Input，Output，EventEmitter}来自'@angular/core'
@组成部分({
选择器：“测试”，
模板：`
{{message}}
`,
})
导出类测试实现OnInit、OnChanges{
名称：字符串；
@输入（）消息；
@Output（）messageChange=neweventemitter（“”）；
构造函数（）{
console.log（'==构造函数=='）
this.name='Angular2'
}
恩戈尼尼特（）{
//this.myService.someMethod（）
console.log（'==ngOnInit='）
}
ngOnChanges（）{
log（'onChange-fired'）；
}
onModelChange（事件）{
this.message=事件；
this.messageChange.emit（this.message）；
}
}

演示：

这是自定义的双向绑定

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



等价物：

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



其中
messageChange
是来自子组件的事件。
我猜您想要在父级和子级之间绑定数据，当子级更改
message
时，父级将收到更新的值

这是演示：

应用程序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 {}

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);
  }
}

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，OnInit，OnChanges}；
从“@angular/platform browser”导入{BrowserModule}；
从'@angular/forms'导入{FormsModule}；
从“./Test”导入{Test}；
@组成部分({
选择器：“我的应用程序”，
模板：`
您好{{name}}来自家长
`,
})
导出类应用程序实现OnInit、OnChanges{
名称：字符串；
构造函数（）{
console.log（'==构造函数=='）
this.name='Angular2'
}
恩戈尼尼特（）{
//this.myService.someMethod（）
console.log（'==ngOnInit='）
}
ngOnChanges（）{
log（'onChange-fired'）；
}
}
@NGD模块({
导入：[BrowserModule，FormsModule]，
声明：[应用程序，测试]，
引导：[应用程序]
})
导出类AppModule{}

测试.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 {}

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);
  }
}

import{Component，NgModule，OnInit，OnChanges，Input，Output，EventEmitter}来自'@angular/core'
@组成部分({
选择器：“测试”，
模板：`
{{message}}
`,
})
导出类测试实现OnInit、OnChanges{
名称：字符串；
@输入（）消息；
@Output（）messageChange=neweventemitter（“”）；
构造函数（）{
console.log（'==构造函数=='）
this.name='Angular2'
}
恩戈尼尼特（）{
//this.myService.someMethod（）
console.log（'==ngOnInit='）
}
ngOnChanges（）{
log（'onChange-fired'）；
}
onModelChange（事件）{
this.message=事件；
this.messageChange.emit（this.message）；
}
}

演示：

这是自定义的双向绑定

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



等价物：

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



其中
messageChange
是来自子组件的事件。
实际上它是在我的控制台中触发的。到底是什么问题？ngOnChanges仅在@Input reference changedit未激活时激活？此消息不显示onChange Fire我尝试更改输入字段中的“Angular 2”文本..但它不在onChange Event中触发无法注释，因此将其放在此处。。。你的问题是恩戈尼特在恩戈尼特改变之前就被解雇了吗？如果是的话，那是设计的。如果控制器同时包含ngOnInit和ngOnChanges，则首先会激发ngOnInit，然后会激发ngOnChanges。实际上，它是在我的控制台中激发的。到底是什么问题？ngOnChanges仅在@Input reference changedit未激活时激活？此消息不显示onChange Fire我尝试更改输入字段中的“Angular 2”文本..但它不在onChange Event中触发无法注释，因此将其放在此处。。。你的问题是恩戈尼特在恩戈尼特改变之前就被解雇了吗？如果是的话，那是设计的。如果控制器同时包含ngOnInit和ngOnChanges，则首先触发ngOnInit，然后触发ngOnChanges。