使用命名的路由器出口导航到子路由
[英] Navigate to child route using named router outlet
本文介绍了使用命名的路由器出口导航到子路由的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有 ngtabcontent，所以它的内容应该是动态的，所以为 PersonalComponent 创建子路由，现在点击下一步它应该导航到它的子路由.
const routes: { path: '', redirectTo: 'tenant', pathMatch: '{ path: "personal", component: children: [{ 路径:'雇主'，组件:AddemployerComponent，插座:'测试'}，]},{ path: "applicant", 组件: AddapplicantComponent },{ 路径:'租户'，组件:TenantappComponent }，{ path: 'animal', 组件: AddanimalComponent },{ path: 'vehicle', 组件: AddvehiclesComponent },{ path: 'background-info', 组件: BackgroundInfoComponent },{ path: 'termsandconditions', 组件: 条款和条件组件 },{ 路径:'支付'，组件:支付组件 }];
所以这是我的路由模块，最初我在其中显示我的个人组件，下次单击后，它应该导航具有出口名称的子路由雇主.
nextFn() {如果(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(['车辆']);} else if (this.router.url === '/vehicle') {this.router.navigate(['background-info']);} else if (this.router.url === '/background-info') {this.router.navigate(['条款和条件']);} else if (this.router.url === '/termsandconditions') {this.router.navigate(['payment']);}}
在组件文件中，我的路线是这样的..
<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>
<p class="registration"><b>注册成功</b></p>
<app-tenant-header></app-tenant-header><div class="form-feilds"><h6>个人信息</h6><ngb-tabset><ngb-tab [id]="tab.id" *ngFor="let tab of tabs;let i = index;"><ng-模板ngbTabTitle>{{tab.title}}{{applicantNumberArray[i - 1]}}</ng-模板><ng-模板 ngbTabContent><div *ngIf="!shared.isSubmitPayment"><app-formfields [personalInfo]=personalInfo [tabIndex]=i [tabs]=tabs(addApplication)="addApplicantFn($event)" (deleteApplication)="deleteApplicantFn($event)"></app-formfields>
<div *ngIf="shared.isSubmitPayment"><路由器插座></路由器插座>
</ng-模板></ngb-tab></ngb-tabset>
<div class="col-md-12 col-sm-12 col-xs-12 property-footer"><app-footer></app-footer>
我的 html 是这样的....
提前致谢
解决方案
child route 和 named route 之间有区别.
子路由用于应该在另一个模板中出现的路由.它们被定义为您拥有它，在路由配置中使用 children 属性.子路由路由到父组件模板中的路由器出口.
命名路由 用于应该显示为另一个模板的兄弟的路由，例如并排显示.它们由一个用名称定义的路由器插座指定.
从你的例子中猜测，你想要一个子路由而不是一个命名路由.所以你应该从你的代码中去掉 outlet 属性.
在此处删除:
{ path: 'employer', component: AddemployerComponent, outlet: 'test'}
这里:
['employer', {outlets: 'test'}]
I have ngtabcontent so its content should be dynamic so create child routes for the PersonalComponent and Now on click of next it should navigate to its child route.
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 }
];
So this is my routing module where Intially I display my personal component and after next click its should navigate the child route employer which has a name for the outlet.
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']);
}}
In component file my route goes like this..
<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>
and my html goes like this ....
Thanks in Advance
解决方案
There is a difference between a child route and a named route.
A child route is for routes that should appear within another template. They are defined as you have it, with the children property in the route configuration. A child route is routed to a router outlet in the parent component's template.
A named route is for routes that should appear as a sibling to another template, such as a side by side display. They are specified with a router outlet defined with a name.
Guessing from your example, you want a child route not a named route. So you should take off the outlet property from your code.
Remove it here:
{ path: 'employer', component: AddemployerComponent, outlet: 'test'}
And here:
['employer', {outlets: 'test'}]
这篇关于使用命名的路由器出口导航到子路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
