angular - 更改 Angular 7 中父组件中的变量

Question

我正在使用 Angular 7。并且我有像下面的 stackblitz 一样的子组件。但是，我可以通过 @Input 访问父控件上的变量，但我无法更改。我怎样才能在下面的 stackblitz 中做到这一点？ 我的目标是通过在隐藏按钮单击时设置 displayPopup=false 来隐藏模式

STACKBLITZ

Answer 1

您需要的是 popup.component.ts 上的 EventEmitter

这是一个工作示例:

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

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent {

  @Output() public hide: EventEmitter<void> = new EventEmitter();

  hideModal() {
      this.hide.emit();
  }
}

然后在父级上您可以像这样订阅该事件:

<app-popup *ngIf="displayPopup" (hide)="displayPopup = false;"></app-popup>