为什么从父组件发出后子组件中的值没有改变？

Question

我在子组件内部有一个父组件view-event-component组件：

<app-visitor-component (message)="message($event)" [_event]="event"></app-visitor-component>

在view-event-component里面有：

  public dataFromChild: any;

  message($event) {
      console.log($event);
      this.dataFromChild = $event;
  }

模板view-event-component是：

{{ dataFromChild }}

因此，当我使用@Output将数据从父级推送到子级时，我总是会收到消息：

message($event) {
   console.log($event);
}

但是变量没有在模板中显示（渲染）：

{{ dataFromChild }}

没有错误和警告。

我使用最新版本的 Angular 和 Mozilla Firefox

Answer 1

如果你有：

changeDetection: ChangeDetectionStrategy.OnPush

手动触发changeDetection：

constructor(cd: ChangeDetectorRef) {}

triggerDetecton():void {
    this.cd.detectChanges();
}

您还应该提供 StackBlitz 以帮助我们更好地理解

Answer 2

在孩子身上试试这样：

message= new EventEmitter<Object>();
messagefunction(event) {
    this.messageEvent.emit(event);
}