Angular 5中如何在Outlet模态框之间进行导航？

我懂你现在卡在哪了：在已经打开的Modal1里点按钮想切到Modal2，结果要么没反应，要么URL乱成一团，Modal2根本不渲染对吧？

问题就出在你当前的导航写法上——this.router.navigate([this.router.url, { outlets: {modal: 'modal1'} }])这种方式会把新的模态路由嵌套到当前模态路由里，导致URL变成类似/main/(modal:modal1)/(modal:modal2)的样子，而Angular的命名路由出口modal同一时间只能承载一个组件，新的Modal2自然没法正确加载。

给你两个靠谱的解决方案，根据你的主路由配置选就行：

方案1：如果MainComponent是根路由（path: ''） #

直接在Modal1的按钮点击事件里这么写：

this.router.navigate([{ outlets: { modal: 'modal2' } }]);

这个写法会直接替换掉modal出口里的当前组件（Modal1），换成Modal2，URL会从/(modal:modal1)变成/(modal:modal2)，完美切换。

方案2：如果MainComponent有自己的路由路径（比如path: 'main'） #

那就明确指定主路由路径，再替换modal出口：

this.router.navigate(['/main', { outlets: { modal: 'modal2' } }]);

这样URL会变成/main/(modal:modal2)，同样能正确渲染Modal2。

额外提醒 #

• 确保你的路由模块配置和现在一样没问题：

const routes: Routes = [
  // 主路由配置，比如指向MainComponent
  { path: '', component: MainComponent }, 
  { path: 'modal1', component: Modal1Component, outlet: 'modal' },
  { path: 'modal2', component: Modal2Component, outlet: 'modal' }
];

• 要是想在切换时加个关闭当前模态窗口的动画效果，可以在Modal1的导航前加个短延迟，或者结合组件的销毁逻辑处理，但核心的路由写法就是上面两种。

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