angular - 使用命名路由器出口导航到子路由
问题描述
我有 ngtabcontent 所以它的内容应该是动态的,所以为 PersonalComponent 创建子路由,现在点击下一个它应该导航到它的子路由。
const routes: { path: '', redirectTo: 'tenant', pathMatch: '{ path: "personal", component: children: [
{ path: 'employer', component: AddemployerComponent, outlet: 'test'},
]
},
{ path: "applicant", component: AddapplicantComponent },
{ path: 'tenant', component: TenantappComponent },
{ path: 'animal', component: AddanimalComponent },
{ path: 'vehicle', component: AddvehiclesComponent },
{ path: 'background-info', component: BackgroundInfoComponent },
{ path: 'termsandconditions', component: TermsandconditionsComponent },
{ path: 'payment', component: PaymentComponent }
];
所以这是我的路由模块,最初我会在其中显示我的个人组件,然后单击它应该导航具有插座名称的子路由雇主。
nextFn() {
if (this.router.url === '/personal') {
this.router.navigate(['employer', {outlets: 'test'}]);
this.shared.isSubmitPayment = true;
} else if (this.router.url === '/employer') {
this.router.navigate(['animal']);
} else if (this.router.url === '/animal') {
this.router.navigate(['vehicle']);
} else if (this.router.url === '/vehicle') {
this.router.navigate(['background-info']);
} else if (this.router.url === '/background-info') {
this.router.navigate(['termsandconditions']);
} else if (this.router.url === '/termsandconditions') {
this.router.navigate(['payment']);
}}
在组件文件中,我的路线是这样的..
<div class="row personal-info">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon"><i class="fa fa-check" aria-hidden="true"></i></div>
</div>
<p class="registration"><b>Registration Successful</b></p>
</div>
</div>
<app-tenant-header></app-tenant-header>
<div class="form-feilds">
<h6>Personal Information</h6>
<ngb-tabset>
<ngb-tab [id]="tab.id" *ngFor="let tab of tabs;let i = index;">
<ng-template ngbTabTitle>
{{tab.title}}{{applicantNumberArray[i - 1]}}
</ng-template>
<ng-template ngbTabContent>
<div *ngIf="!shared.isSubmitPayment">
<app-formfields [personalInfo]=personalInfo [tabIndex]=i [tabs]=tabs (addApplication)="addApplicantFn($event)" (deleteApplication)="deleteApplicantFn($event)"></app-formfields>
</div>
<div *ngIf="shared.isSubmitPayment">
<router-outlet></router-outlet>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 property-footer">
<app-footer></app-footer>
</div>
我的html是这样的......
提前致谢
解决方案
child route
a和 a之间是有区别的named route
。
子路由用于应该出现在另一个模板中的路由。它们是根据您的定义定义的,具有children
路由配置中的属性。子路由被路由到父组件模板中的路由器出口。
命名路由用于应该作为另一个模板的兄弟出现的路由,例如并排显示。它们是用一个用名称定义的路由器插座指定的。
从您的示例中猜测,您想要一个子路由而不是命名路由。所以你应该outlet
从你的代码中去掉这个属性。
在这里删除它:
{ path: 'employer', component: AddemployerComponent, outlet: 'test'}
和这里:
['employer', {outlets: 'test'}]
推荐阅读
- javascript - 使用动态字符串附加 JSON 对象键
- javascript - 获得响应后如何刷新加载 iFrame 的页面
- javascript - 使用 Javascript 将来自 api 的 rgb 数据作为背景应用到 html 元素
- google-cloud-vision - Cloud Vision API 服务突然变慢
- c++ - 为什么不启动子循环的迭代器使其在一个父循环完成后停止?
- sql - 如何运行存储在 Redshift 表中的 SQL 查询
- c - 随机函数中的枚举
- javascript - 画布在 html 脚本中没有响应
- python - 根据 pandas df 中的两列替换值
- vue.js - TypeError:无法读取未定义的属性“$http” - 类星体