如何在使用 Angular 和 Angular material 打开组件之前显示对话框？

Question

我有 2 个组件，第一个组件包含一个指向第二个组件的按钮 onclick 路由。我想在打开第二个组件时显示弹出窗口或对话框。

我该怎么做！

我和 Angular 8 和 Angular material 一起工作。

Answer 1

import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { Router } from '@angular/router';

constructor(private modalService: BsModalService,
            private router: Router) { }

clickToShowComponent() {
  this.bsModalRef = this.modalService.show(SecondComponent);
  this.secondComponentSubscription = this.modalService.onHide.subscribe((routeToSecondComponent: any) => {
    if(routeToSecondComponent) {
       this.router.navigate(['/secondComponentRoute']);
    }
    this.secondComponentSubscription.unsubscribe();
  });
}

Answer 2

没关系我找到了解决方案

我刚刚试过了，效果很好

在我添加的第二个组件中：

import { MatDialog } from '@angular/material';
import { DialogComponent } from '../../dialog-video/dialog.component';

//... other lines
    
constructor(public dialog: MatDialog) {} 
   
  ngAfterViewInit() {
    this.dialog.open(DialogComponent);
  }

如何在使用 Angular 和 Angular material 打开组件之前显示对话框？

How can I display a dialog before opening a component with Angular and Angular material?

typescript

angular-material

angular