如何在模態窗口[ANGULAR 5]中創建路由？

Question

我有一個需要根據模態窗口的主體內的特定條件在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' }