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

Question

我有一个需求，我需要根据模式窗口主体中的特定条件在2个不同的视图之间来回切换。

这2个视图是：

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

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

注意：所有这些视图都应显示在模式窗口主体中。

因此，使用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' }