@Input() 中的相同布尔值不会触发更改检测

Question

我有一个角度应用程序，其中有一个弹出组件。我可以通过它的父级以及它本身来控制弹出窗口的可见性。

应用程序组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <popup [visible]="visible"></popup>
  <button (click)="onShow()">Show</button>
  <button (click)="onHide()">Hide</button>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public visible: boolean = false;
  public onShow(): void {
    this.visible = true;
  }
  public onHide(): void {
    this.visible = false;
  }
}

弹出组件.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'popup',
  template: `<div *ngIf="visible">My fancy popup <button (click)="onClick()">Click to close</button></div>`,
})
export class PopupComponent  {
  @Input()
  public visible: boolean;

  public onClick(): void {
    this.visible = false;
  }
}

工作堆栈闪电战。

使用案例：

• 用户可以通过单击弹出窗口中的按钮来关闭弹出窗口
• 用户可以通过单击父组件中的按钮来关闭弹出窗口
• 用户可以通过单击父组件中的按钮来显示弹出窗口

问题：

• 单击以显示弹出窗口
• 单击弹出窗口内部将其隐藏
• 单击以显示弹出窗口
• 弹出窗口不显示

据我所知，是因为visible里面的成员app.component.ts没有改变，所以 的PopupComponent值@Input()也没有改变。知道如何解决这个问题吗？

Answer 1

您应该将更改从子级发送到父级：

export class PopupComponent  {
  @Input()
  public visible: boolean;
  @Output() visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  public onClick(): void {
    this.visible = false;
    this.visibleChange.emit(this.visible);
  }
}

家长：

@Component({
  selector: 'my-app',
  template: `
  <popup [(visible)]="visible"></popup>
  <button (click)="onShow()">Show</button>
  <button (click)="onHide()">Hide</button>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public visible: boolean = false;
  public onShow(): void {
    this.visible = true;
  }
  public onHide(): void {
    this.visible = false;
  }
}

分叉演示