如何在 angular 6 中关闭模态

Question

我正在尝试从主页关闭模式 component.my 关闭按钮在主页 component.If 我单击关闭按钮我想关闭 modal.If 我从主页组件单击关闭按钮如何从主页组件设置可见值为 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 中的这种方法，它工作正常。

您的父项是 Dialog，子项是 app-home。所以发射器是在子 class 中定义的，就像这样

export class HomeComponent implements OnInit {

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

  ...

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

}

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

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

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

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

   ...
}

希望对您有所帮助。

如何在 angular 6 中关闭模态

How to close modal in angular 6

angular6

angular7

angular8