问题

My current url is http:localhost:4200/home/(dialog:login)
I want to navigate to http:localhost:4200/reset-password

The dialog in the url is an outlet which is located in a primeng dialog.

I tried this command: this.router.navigate(['/reset-password',{ outlets: { dialog: null } }]);

The navigation is working but the dialog:login is still in the url and the dialog is also open.

I got it working, but it is a really ugly solution. I think this must be possible.

setTimeout(() => {
this.router.navigate([{ outlets: { dialog: null } }]);
setTimeout(() => {
this.router.navigate(['/reset-password']);
}, 100);
}, 100);

 setTimeout(() => {
      this.router.navigate([{ outlets: { dialog: null } }]);
      setTimeout(() => {
        this.router.navigate(['/reset-password']);
      }, 100);
    }, 100);

答案1

得分: 1

由于您正在使用多个路由出口，您必须明确告诉两个出口在导航时渲染什么内容。您所使用的 `[routerLink]` 语法不太正确。

您的附加路由被命名为 `dialog`，因此您需要分别定位默认出口（通过 `primary` 访问），以及您的 `dialog` 出口。

以下是使用可注入的 `Router` 的简单解决方案：

```ts
 reset() {
   this.router.navigate([
     { outlets: { primary: ['password-forgot'], dialog: null } },
   ]);
 }

<details>
<summary>英文:</summary>

Since you are using multiple router-outlets you have to explicitly tell both outlets what to render on navigation. The `[routerLink]` syntax you used is not quite right.

Your additional router was named `dialog` therefore you need to target the default outlet, which is accessed as `primary`, and your `dialog` outlet seperately. 
 
Here is a simple solution using the injectable `Router`:

```ts
 reset() {
   this.router.navigate([
     { outlets: { primary: [&#39;password-forgot&#39;], dialog: null } },
   ]);
 }