如何在模态窗口 [ ANGULAR 5 ] 内创建路由? [英] How to create routing inside a modal window [ ANGULAR 5 ]?

问题描述

我有一个需求，我需要根据模态窗口主体内的特定条件在两个不同的视图之间来回切换.

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.

这两个视图是:

1. 列表项(初始视图)
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屋！