首页 前端开发 引导模式中的两个 Angular 路由器出口
引导模式中的两个 Angular 路由器出口
[英] Two Angular router-oulets in bootstrap modal
本文介绍了引导模式中的两个 Angular 路由器出口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的 Angular 应用程序中添加了其他模式，两者都有不同的
前一个工作正常，但在添加具有不同路线的第二个模式后，第一个停止工作.我尝试在路由器插座上使用不同的 name 属性似乎没有任何效果.如果我注释掉另一个，一次只有一个在工作.
季节<button type="button" data-target="#settings" data-toggle="modal" routerLink="setup_package">包裹 第一个模态
<div class="modal-dialog"><!-- 模态--><div class="modalfade" id="myModal" role="dialog"><div class="modal-dialog"><!-- 模态内容--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title">模态标题</h4>
<div class="modal-body"><路由器插座></路由器插座>//已经尝试过 name 属性
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
第二模态
<div class="modal-dialog"><!-- 模态--><div class="modalfade" id="myModal" role="dialog"><div class="modal-dialog"><!-- 模态内容--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title">模态标题</h4>
<div class="modal-body"><路由器插座></路由器插座>//已经尝试过 name 属性
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
解决方案
你需要使用辅助路由，我贴一个我自己代码的类似案例，尝试用你的代码做同样的事情:
<!-- 辅助插座--><router-outlet name="sidePanel"></router-outlet>
<div class="main-content m-0 p-0"><!-- 主要出口--><路由器插座></路由器插座>
路由配置应该类似于这个:
const 路由:Routes = [{小路: ''，重定向到:'/app/auth/login',路径匹配:'完整'},{路径:'应用'，孩子们: [{路径:'主要'，组件:主组件},{路径:'侧菜单'，组件:SlidePanelComponent，outlet: 'sidePanel',//需要提及辅助路由的名称}]]最后，你需要像这样在routerLink中提及插座的名称:
I have added Other modal in my Angular application both have different
<router-outlet></router-outlet>
Previous one was working fine but after adding 2nd modal with different routes 1st stopped working. i tried with different name attributes on router-outlets nothing seems to be working.
only one is working at a time if i comment out the other one.
<button type="button" data-target="#settings2" data-toggle="modal" routerLink="setup_season">
Season
</button>
<button type="button" data-target="#settings" data-toggle="modal" routerLink="setup_package">
Package
</button>
first modal
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<router-outlet></router-outlet> // already tried with name attribute
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
2nd Modal
<div id="settings2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<router-outlet></router-outlet> // already tried with name attribute
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
解决方案
You need to use auxiliary routes, I will paste a similar case of my own code, try to do the same with your code:
<div class="side-panel">
<!-- the auxiliary outlet -->
<router-outlet name="sidePanel"></router-outlet>
</div>
<div class="main-content m-0 p-0">
<!-- the primary outlet -->
<router-outlet></router-outlet>
</div>
The routes configurations should be something similar to this one:
const routes: Routes = [
{
path: '',
redirectTo: '/app/auth/login',
pathMatch: 'full'
},
{
path: 'app',
children: [
{
path: 'main',
component: MainComponent
},
{
path: 'side-menu',
component: SlidePanelComponent,
outlet: 'sidePanel', // You need to mention the name of the auxiliary route
}
]
]
Finally, you need to mention the name of the outlet in the routerLink just like this:
<a [routerLink]="[{ outlets: { sidePanel: 'side-menu'}}]">
这篇关于引导模式中的两个 Angular 路由器出口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
