angular - 当值从父级传递给子级时，ngOnChanges 不起作用

Question

为什么 ngOnChanges 的值child_message改变后也不会被触发？我看到当值从父级传递给子级时，ngDocheck() 被触发。然而，它会被触发多次，不仅是在传递值时，而且在初始化组件时也是如此。我想要在初始化后更改值时触发的东西。

父组件.ts：

import { Component, OnInit,ViewChild,AfterViewInit, OnChanges, Input } from '@angular/core';
import { ChildComponent } from '../child/child.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit,OnChanges{
  parent_message = "parent talking";
  @Input() clicked:boolean =false;

  constructor() { }

  ngOnInit(){
    //subscribing to message !!
    //this.data.currentMesssage.subscribe(message => this.message =message)
  }
  ngOnChanges(){
    console.log("change occured")
  }
  onClick(){
    this.clicked = true;
  }
}

父组件.html：

   <h1>Parent </h1>
Message:{{message}}
<button (click)='onClick()'>Send Message</button> 
<div *ngIf="clicked; else notclicked">
    <app-child  [childMessage]="parent_message"> </app-child>
</div>
<ng-template #notclicked>
    <app-child> </app-child>
</ng-template>

ChildComponent.ts：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
})
export class ChildComponent implements OnChanges, DoCheck{
  @Input() childMessage: string ="child here ";
  //@Output()messageEvent = new EventEmitter<string>();
  constructor() { }
  ngOnChanges(){
    console.log("change occured");
  }
  ngDoCheck(){
    console.log("ngDoCheck");
  }
}

ChildComponent.html：

   <h1>Child</h1>
Say:{{childMessage}}

标签： angular

Answer 1

尝试改用ngDoCheck()生命周期钩子。

在每次更改检测运行期间都会调用此挂钩。

export class ParentComponent implements OnInit, DoCheck {
      message = "parent talking";  

      ngOnInit(){ }

      ngDoCheck(){
        console.log("change occured")
      }

      receiveMessage($event){
        this.message = $event;  
      }
    }