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

【问题标题】：why ngOnChanges() function not fired in angular 2?为什么 ngOnChanges() 函数没有在 Angular 2 中触发？
【发布时间】：2023-04-08 05:35:02
【问题描述】：

请你告诉我为什么 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');

    }
}

【问题讨论】：

实际上它是在我的控制台中触发的。究竟是什么问题？
ngOnChanges 仅在 @Input 引用更改时触发
它没有开火？此消息不显示 onChange 已触发
我尝试从输入字段更改“Angular 2”文本..但它没有触发 onchange 事件
无法发表评论，因此将其放在这里...您的问题是 ngOnInit 在 ngOnChanges 之前被解雇吗？如果是，那么这是设计使然。如果控制器同时包含 ngOnInit 和 ngOnChanges，则首先触发 ngOnInit，然后触发 ngOnChanges。

标签： javascript angularjs angular angular2-routing angular2-template

【解决方案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 是来自子组件的事件。

【讨论】：