javascript - 引导模式中的两个 Angular 路由器出口
问题描述
我在我的 Angular 应用程序中添加了其他模式,两者都有不同的
<router-outlet></router-outlet>
前一个工作正常,但在添加具有不同路线的第二个模式后,第一个停止工作。我尝试name
在路由器插座上使用不同的属性,但似乎没有任何效果。如果我注释掉另一个,一次只有一个在工作。
<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>
第一模态
<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>
第二模态
<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>
解决方案
您需要使用辅助路由,我将粘贴我自己代码的类似案例,尝试对您的代码执行相同操作:
<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>
路线配置应该与此类似:
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
}
]
]
最后,您需要在 routerLink 中提及插座的名称,如下所示:
<a [routerLink]="[{ outlets: { sidePanel: 'side-menu'}}]">
推荐阅读
- reactjs - 如何将函数放入 React className 字段?
- c++ - 'distdir-am' 所需的目标'bootstrap' 没有规则。停止
- javascript - 如何从 HTML 表单中选择 HtmlService 和 ContentService 之间的 doGet(e) 函数?
- ios - 如何将可选链接与 nil 合并运算符一起使用?
- gtk - 是否可以在 gtk3 中隐藏弹出箭头?
- python - 如何从打包的 kivy android apk 导入 .so 文件?
- reactjs - .htaccess - 在两个反应应用程序之间重定向
- javascript - 如何获取一个数字并返回一个字符串数组javascript
- nim-lang - 如何在 Nim 中将字符插入字符串
- python - 使用 Python 检索图像描述(不通过 PIL 或 exifread 在 EXIF 数据中返回)