Angular路由跳转问题：移除dialog outlet并导航至新路由

问题根源 #

你之前的导航写法有误：把outlets配置放在了路由路径数组中，而非导航选项参数里，导致Angular无法正确识别要清除的辅助路由，进而出现URL残留、对话框未关闭的问题。

优雅实现方式 #

方式一：一次性完成导航（推荐）

直接在导航时同时指定主路由切换和辅助路由清除，将outlets配置放在navigate的第二个参数（导航选项）中：

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

如果需要确保URL被完全替换，可加上replaceUrl选项：

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

方式二：链式调用路由导航Promise

若需要分步执行（先关闭对话框路由，再切换主路由），利用router.navigate返回的Promise替代setTimeout，确保前一步导航完成后再执行下一步：

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

方式三：明确指定主/辅助路由

通过对象形式同时定义主outlet（默认名为primary）和辅助outlet的目标状态，一次性完成路由变更：

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

内容的提问来源于stack exchange，提问作者keschra