Question

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

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

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

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

SignupComponent.ts：（位于模式内）

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {

    guard let selectedImage = info[.originalImage] as? UIImage else {
        print("Error: \(info)")
        return
    }

    // do your thing...

    dismiss(animated: true, completion: nil)
}

}

navbar.ts：

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

为了进行测试，我在导航栏中创建了另一个toolobar项目，该项目直接路由到我的注册帐户，并且这有效！

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

}

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

modal.html

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

modal.ts

<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>

谢谢，雅各布

Answer 1

您可以简单地将routerlink添加到登录和注册按钮/链接。例如：

<nav>
 <a routerLink="/sign-up" routerLinkActive="active">Sign Up</a>
 <a routerLink="/login-route" routerLinkActive="active">Login</a>
</nav>

这会破坏模态或加载模态的组件，您应该重定向到下一条路线。

您还可以通过使用按钮上的(click)来实现相同的目的，并在从模式组件重定向之前进行某些操作。

EX：

 this.router.navigate(['../new-route'], { relativeTo: this.route });

在documentation here.中查看路由器示例

Answer 2

这是一个简单的示例，说明解决方案的外观

modal.component.ts

export class ModalComponent {

  constructor(
    public dialogRef: MatDialogRef<ModalComponent >,
    private router: Router,
  ) {

  }

  public navigateToSomewhere(): void {
    this.router.navigate(['somewhere']);
    this.dialogRef.close();
  }

}

modal.component.html

 <button(click)="navigateToSomewhere()">Navigate</button>

Answer 3

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

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

要在另一个页面中重定向它，您需要从打开matDialog的位置订阅close事件。如下所示：

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

我希望这会有所帮助。

Answer 4

还有另一种情况，当用户单击的不是(click)元素而是单击[routerLink]元素时-因此，您不能将这种点击作为点击事件来处理，而需要关闭模式以某种方式，因为如果用户单击模式内的routerLink元素-模式将未关闭，但是在模式下，内容将被重定向。因此解决方案是-监听模式中的router.events并检查该路由是否NavigationStart版本-请关闭模式。

this.router.events.subscribe((event) => {
        if (event instanceof NavigationStart) {
          if (event.url === '/auth/forgot-pass') { //<= your route you observe as a click
            this.dialogRef.close(); 
          }
        }
      })

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

4 个答案: