Question

即使child_message的值更改后，为什么也不会触发ngOnChanges？我看到将值从父级传递给子级时会触发ngDocheck（）。但是它会多次触发，不仅是在传递值时，而且在初始化组件时都会触发。我想要在初始化后更改值时触发的东西。

ParentComponent.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;
  }
}

ParentComponent.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}}

Answer 1

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

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

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

      ngOnInit(){ }

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

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

Answer 2

实施有2个错误 -价值变化没有发生 -值未正确传递给子组件您可以看到示例实现只是参考 https://angular.io/guide/component-interaction

Answer 3

每当它检测到组件（或指令）的输入属性的更改时，Angular就会调用其ngOnChanges（）方法。

如果您将任何属性与模板绑定，并且属性的值已更改，则ngOnChanges()将触发。

我们需要记住，当bind属性是一个Object时，ngOnChanges()仅在更改整个对象时才会触发。

只需在父模板中更改此行，它将正常工作。

<app-child (messageEvent)="receiveMessage($event)"  [child_message]="message"> </app-child>

Answer 4

如果要将消息从子级传递给父级，则需要这样实现

% option 2 - regexp ('$' to specify end of string)
files = files( ~cellfun( @isempty, regexp( files, [target, '$'], 'once' ) ) );

在父组件中，您可以从@Output() // in child class nextStep = new EventEmitter(); // you can call with data in some function like on click oo input changed this.nextStep.emit({key: 'value'});对象获得价值

$event

Answer 5

您的代码有几个问题。

在父模板中，传递parent_message中不存在的ParentComponent属性bu

<app-child (messageEvent)="receiveMessage($event)" [child_message]="parent_message"> </app-child>
//                                                                  ^^^^^^^^^^^
//                                                                  this needs to be "message" property of ParentComponent

然后在同一行：

<app-child (messageEvent)="receiveMessage($event)" [child_message]="parent_message"> </app-child>
//                                                   ^^^^^^^^^^^
//                                                   this needs to be "childMessage" property of ChildComponent

并且正如official docs中所述，ngOnChanges在更改了数据绑定的属性（例如@Input）后会被触发。因此它不会发射。

将值从父级传递给子级时，ngOnChanges不起作用

5 个答案: