Перейдите к дочернему маршруту, используя именованный маршрутизатор - PullRequest
Новая
       18

Перейдите к дочернему маршруту, используя именованный маршрутизатор

0 голосов
/ 17 декабря 2018

У меня есть 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 }
];

Так что это мой модуль маршрутизации, в котором IntiallyЯ отображаю свой личный компонент и после следующего щелчка на нем должен перейти дочерний маршрутный работодатель, у которого есть имя для выхода. 

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 выглядит так ...

Заранее спасибо

1 Ответ

0 голосов
/ 17 декабря 2018

Существует разница между child route и named route.

A дочерним маршрутом для маршрутов, которые должны отображаться в другого шаблона.Они определяются, как у вас, со свойством children в конфигурации маршрута.Дочерний маршрут направляется к выходу маршрутизатора в шаблоне родительского компонента.

A Именованный маршрут предназначен для маршрутов, которые должны отображаться в виде одного элемента с другим шаблоном, например, рядом с дисплеем.,Они указываются с выходом маршрутизатора, определенным с именем.

Исходя из вашего примера, вы хотите дочерний маршрут , а не именованный маршрут .Поэтому вы должны удалить свойство outlet из своего кода.

Удалите его здесь: 

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

И здесь: 

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