如何在模态窗口[ANGULAR 5]中创建路由? [英] How to create routing inside a modal window [ ANGULAR 5 ]?
问题描述
我有一个要求,我需要根据模式窗口主体内的特定条件在2个不同的视图之间来回切换。
I have a requirement where i need to switch between 2 different views back and forth based on certain condition inside a modal window's body.
这2个视图是:
- 列出项目(初始视图)
- 添加新项目
添加新项后,我需要切换到列表项视图。
After adding new items i need to switch to the List items view.
注意:所有这些视图都应显示在模式窗口主体中。
NOTE: All these views should be displayed inside a modal windows body.
因此,使用ANGULAR 5路由,如何创建新的路由/子路由
So using ANGULAR 5 routing how can i create new routes / sub routes inside this modal component ?
推荐答案
创建另一个具有这样名称的路由器出口
Create another router-outlet with a name like this
<router-outlet name="modal"></router-outlet>
要在ts中导航至此,请使用
To navigate to it in your ts, use
this.router.navigate([{ outlets: { modal: 'route' }}])
,同时在您的HTML中使用
while in your html, use
<button md-button [routerLink]="[{outlets: {'modal': ['route']}}]">Speakers</button>
您也可以在路线中指定它,例如
you can also specify it in your routes like
{ path: ':id', component: YourComponent, outlet: 'modal' }
这篇关于如何在模态窗口[ANGULAR 5]中创建路由?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!