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

Posted 2023-02-23

【中文标题】如何在模态窗口 [ANGULAR 5] 内创建路由？

【英文标题】：How to create routing inside a modal window [ ANGULAR 5 ]?

【发布时间】：2019-01-15 16:52:30

【问题描述】：

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

这两个视图是：

列表项（初始视图） 添加新项目

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

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

那么使用 ANGULAR 5 路由如何在这个模态组件中创建新路由/子路由？

【问题讨论】：

在你的模型中添加<router-outlet>标签，所有的内容都会被加载到那里

您可以将其作为参数传递给模态，并确定要在其中加载哪个 UI。

【参考方案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' 

【讨论】：

谢谢 Ekene。你到底把命名路线放在哪里？

在模态本身中。即您希望在哪里呈现内容