如何在角度 6 中关闭模态

Question

我正在尝试从主组件关闭模式。我的关闭按钮在主组件中。如果我单击关闭按钮，我想关闭模式。如果我从主组件单击关闭按钮，如何设置可见值在主组件中为 false .我该如何使用服务？或有其他方法吗？怎么做？

dialog.component.html

    <div [@dialog] *ngIf="visible" class="dialog">
      <ng-content></ng-content>
      <button *ngIf="closable" (click)="close()" aria-label="Close" class="dialog__close-btn">X</button>
      <app-home></app-home>
      </div>
    <div *ngIf="visible" class="overlay" (click)="close()"></div>

home.component.ts:

    <button (click)="showDialog = !showDialog" class="btn">Close</button>

演示：https://stackblitz.com/edit/angular-7zdnwy?file=src%2Fapp%2Fdialog%2Fdialog.component.html

Answer 1

我从Angular Documentation 遵循了这种方法，它工作正常。

You Parent 是 Dialog，child 是 app-home。所以发射器是这样在子类中定义的

export class HomeComponent implements OnInit {

  @Output() close = new EventEmitter<boolean>();

  ...

  // <button (click)="onClose()" in html
  onClose() {
    this.close.emit(true)
  }

}

并像这样在父 dialog 类中监听事件

// html
<app-home (close)="onCloseClick($event)"></app-home>

// Class code
export class DialogComponent implements OnInit {
  ...

  onCloseClick(close: Boolean) {
    if(close){
      this.close()
    }
  }

   ...
}

希望对你有帮助。