javascript - 从 Angular 5 中的子组件更新父 bool 值

Question

我只想通过单击子组件中的按钮来更新父组件中的 bool 值。我有一个基于动态 ngClass 隐藏和显示的滑出式子组件。该类是根据来自父级的 bool 值设置的。但是，当我从子项中的按钮关闭该组件时，我想更新父项中的 bool 值:

父组件 typescript :

export class AppComponent implements OnInit   {

  showFlyout: boolean

  constructor() {}

  ngOnInit() {
    this.showFlyout = false;
  }
}

和父 html:

<main>

  <button (click)="showFlyout = !showFlyout"><i class="fa fa-check"></i>Show Flyout</button>

  {{showFlyout}}

  <app-child id="flyout" [ngClass]="showFlyout ? 'active' : ''"></app-child>

</main>

子组件 typescript :

export class ActivateFlyoutComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  closeActivationFlyout() {
    const flyout = document.getElementById('flyout');
    flyout.classList.remove('active');
  }

}

和子组件 html:

<button (click)="closeFlyout()">Close</button>

这是一个 Stackblitz .您可以看到单击父按钮会正确切换类，但我如何通过单击子组件来更新该 bool 值，从而使子组件中不需要 closeActivationFlyout() 方法？

Answer 1

像其他人提到的那样使用 @Output()，但它需要发出一个事件，您还需要检查在父 html 中触发的事件。

这是一个有效的 StackBlitz

在子组件中。

@Output() onCloseClick = new EventEmitter();

closeFlyout() {
  this.onCloseClick.emit();
}

并在父组件 html 中。

<app-child id="flyout" [ngClass]="showFlyout ? 'active' : ''" (onCloseClick)="showFlyout = false"></app-child>

您还可以在父组件中创建一个函数，并触发它，例如 (onCloseClick)="doFunction()"