时间戳

首页 > 解决方案 > 从 Angular 中的 Modal 路由到其他页面

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

问题描述

我使用 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;
}

谢谢，雅各布

标签： angularroutingmodal-dialog

解决方案

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

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

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

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

我希望这将有所帮助。

推荐阅读