从 Angular 中的 Modal 路由到其他页面

Question

我使用 MatDialog 创建了一个模式。该模态可以从我的工具栏打开。

在模式中，我有一个用于登录和注册的选项卡式页面。这些是通过路由加载的单独组件。

现在我想关闭模式并在用户单击模式内的按钮时将用户重定向到另一个页面。链接已更新，但我的内容未显示！

navbar->modal<->LoginComponent/SignupComponent（此处的链接应关闭模式并重定向）

SignupComponent.ts：（位于模态框内）

registerBuisnessClicked() {
this.dialogRef.close('signup');

}

导航栏.ts：

dialogRef.afterClosed().subscribe(result => {
  if (result === 'signup') {
    console.log('redirecting to signup');
    this.router.navigate(['/signup']);
  }
});

为了进行测试，我在导航栏中创建了另一个工具栏项目，它直接路由到我的注册，这有效！

user() {
this.router.navigate(['/signup']);

}

在我的模态中我有以下代码：

模态.html

<nav mat-tab-nav-bar mat-align-tabs="center">

        <a mat-tab-link 
          (click)="switchToLogin()"
          [active]="rla1">
          Login
        </a>

        <a mat-tab-link 
          (click)="switchToRegister()"
          [active]="rla2">
          Register
        </a>

      </nav>

模态.ts

constructor(private router: Router) { }

ngOnInit() {
  this.router.navigate(['/login']);
  this.rla1 = true;
  this.rla2 = false;
}

switchToRegister() {
  this.router.navigate(['/signup'], { replaceUrl: true });
  this.rla1 = false;
  this.rla2 = true;
}

switchToLogin() {
  this.router.navigate(['/login'], { replaceUrl: true });
  this.rla1 = true;
  this.rla2 = false;
}

谢谢，雅各布

Answer 1

当您关闭模式时，您可以简单地使用：

onClose() {
  this.dialogRef.close('closed');
}

要将其重定向到另一个页面，您需要从打开 matDialog 的位置订阅关闭事件。就像下面这样：

dialogRef.afterClosed().subscribe((result) => {
  if (result === 'closed') {
       this.router.navigate(['routing-path']);
  }
});

我希望这个能帮上忙。