Question

我正在尝试从home组件中关闭模态。我的关闭按钮在home组件中。如果我单击关闭按钮，我想关闭模态。如果我从home组件中单击关闭按钮，如何设置可见值从home组件为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开始采用了这种方法，效果很好。

您的父母是对话框，孩子是应用首页。因此，发射器是在子类中定义的

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()
    }
  }

   ...
}

希望有帮助。

如何在角度6中关闭模态

1 个答案: