mat-dialog 无法在页面加载时正确打开

Question

我试图让 mat-dialog 在加载特定 url 时打开。目前，它仅在您重新加载整页时才有效。我希望它在加载此特定 angular 路由时启动 mat-dialog，无论它是整页加载还是已加载使用 angular 路由器的 angular 应用程序。我尝试将以下代码放在 ngOnInit() 中，也尝试放在 ngAfterViewInit() 中，但同样的问题。我尝试的另一件事是在获取 userIsAuthenticated 值后立即将其放入构造函数中，但同样的问题。感谢您的帮助！

 ngAfterViewInit() {
    if (!this.userIsAuthenticated) {
      const dialogRef = this.dialog.open(ConfirmationAgeComponent, {
        panelClass: "dialogBoxStyler"
      });

      dialogRef
        .afterClosed()
        .pipe(takeUntil(this.destroy))
        .subscribe(result => {
          if (result) {
            this.over21Agreed = true;
          }
        });
    }
  }

我还尝试将以下内容添加到构造函数中：

 constructor(private router: Router){
    this.url = this.router.url;
    if (this.url === '/' || this.url.includes('search-results')) {
      alert("HERE")
    }
}

但警报仅在第一次弹出。如果我单击地址栏中的 url 以突出显示 url 并按回车键，则不会出现警报。

Answer 1

您应该在主 app.component 构造函数中订阅路由器事件，以便能够跟踪导航，例如：

constructor(private router: Router) {
        router.events.subscribe((event: RouterEvent) => this.handleEvent(event));
}

handleEvent(event: RouterEvent) {
        if (event instanceof NavigationStart) {
            // do your thing here using `event.url` for example
        }
        if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
            // or here
        }
}

可以找到关于 RouterEvent 的文档here

Answer 2

我们以错误的方式使用了angular生命周期。

定义对话框：-

 openAgeConfirmationDialog() {

    const dialogRef = this.dialog.open(ConfirmationAgeComponent, {
      panelClass: 'dialogBoxStyler'
    });

    dialogRef
      .afterClosed()
      .pipe(takeUntil(this.destroy))
      .subscribe(result => {
        if (result) {
          // I defined over21Agreed to true so that component appears on screen fyi
          this.over21Agreed = true;
        }
      });

  }

然后，在 ngOnInit() 中调用 openAgeConfirmationDialog() 一次，在 ngOninit() 中调用 router.events 一次。

ngOnInit() {

    this.openAgeConfirmationDialog();

    this.router.events.pipe(
      filter((event: RouterEvent) => event instanceof NavigationEnd),
      takeUntil(this.destroy),
      debounceTime(1000)
    ).subscribe(() => {
      this.openAgeConfirmationDialog();
    });

我们正在使用 debounceTime 因为它绕过了路由更改引起的问题。

Answer 3

一种方法是将对话框组件作为 header 组件的 children 放置在路由配置中，并提供您希望对话框组件打开的 'url'作为 header 组件中的 routerLink。看看下面的 stackblitz link。希望这就是您要找的..

Loading mat-dialog component on a particular route

mat-dialog 无法在页面加载时正确打开

mat-dialog not opening on page load properly

angular

angular-material

mat-dialog