如何在模态 window [ ANGULAR 5 ] 中创建路由？

Question

我有一个要求，我需要根据 modal window 的 body.[=12 中的特定条件来回切换 2 个不同的视图=]

这 2 个视图是：

1. 列表项（初始视图）
2. 添加新项目

添加新项目后，我需要切换到列表项目视图。

注意： 所有这些视图都应显示在模态 windows 正文中。

所以使用 ANGULAR 5 路由我如何在这个模态组件中创建新的路由/子路由？

Answer 1

使用这样的名称创建另一个路由器插座

<router-outlet name="modal"></router-outlet> 

要在您的 ts 中导航到它，请使用

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

在您的 html 中，使用

<button md-button  [routerLink]="[{outlets: {'modal': ['route']}}]">Speakers</button>

你也可以在你的路线中指定它，比如

{ path: ':id', component: YourComponent, outlet: 'modal' }