使用命名路由器出口导航到子路由 [英] Navigate to child route using named router outlet

问题描述

我有ngtabcontent，因此它的内容应该是动态的，因此为PersonalComponent创建子路由，然后单击下一步，它应该导航到其子路由.

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>

和我的html这样....

and my html goes like this ....

预先感谢

推荐答案

子路由和命名路由之间是有区别的.

子路线用于应在 另一个模板内显示的路线.可以根据需要定义它们，并在路由配置中使用 children 属性.子路由被路由到父组件模板中的路由器出口.

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.

从您的示例猜测，您想要的是子路线，而不是命名的路线.因此，您应该从代码中删除 outlet 属性.

Guessing from your example, you want a child route not a named route. So you should take off the outlet property from your code.

在此处删除:

{ path: 'employer', component: AddemployerComponent, outlet: 'test'}

在这里:

['employer', {outlets: 'test'}]

这篇关于使用命名路由器出口导航到子路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！