angular - 如何在模态窗口 [ANGULAR 5] 内创建路由?
问题描述
我有一个要求,我需要根据模态窗口主体内的特定条件在 2 个不同的视图之间来回切换。
这两个观点是:
- 列表项(初始视图)
- 添加新项目
添加新项目后,我需要切换到列表项目视图。
注意:所有这些视图都应显示在模态窗口主体内。
那么使用 ANGULAR 5 路由我如何在这个模态组件中创建新的路由/子路由?
解决方案
创建另一个具有这样名称的路由器插座
<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' }
推荐阅读
- javascript - 对数组进行反应映射并在 div 中返回
- mysql - 当字段为空时,SQL 查询“like”运算符错误
- powerapps - GroupBy 和连接行
- oracle - Oracle:声明多个常量并在 WHERE 子句中使用它们
- mysql - 加快 mysql SQL 查询,但数据集庞大
- webrtc - RFC 8285 中解释的有关 RTP 扩展标头结构的问题
- python - Google API Drive V3 检索已使用的驱动器存储空间
- python - 如何检测加密字符串中的某些条件并解密?- Python
- android - 前台服务内容意图不是恢复应用程序而是重新启动它
- html - CSS div 自动调整内容大小,最大宽度和省略号文本