1

每当加载特定的 url 时，我都会尝试打开 mat-dialog。目前，它仅在您重新加载整页时才有效。我希望它在加载此特定角度路由时启动 mat-dialog，无论它是完整页面加载还是已加载使用角度路由器的角度应用程序。我试过把下面的代码放进去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 并按 enter，则不会出现警报。

4

3 回答 3

1

我们以错误的方式使用角度生命周期。

定义对话框：-

 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它是因为它绕过了路由更改引起的问题。

于 2020-08-05T13:22:18.510 回答
0

您应该在主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 的文档

于 2020-08-04T20:56:17.647 回答
0

一种方法是将对话框组件作为标题组件的子组件放置在路由配置中，并提供您希望对话框组件在标题组件中作为 routerLink 打开的“url”。看看下面的 stackblitz 链接。希望这就是你要找的..

在特定路线上加载 mat-dialog 组件

于 2020-08-06T13:08:03.920 回答