Конструктор Вызывается дважды в Компонент угловой 7 - PullRequest
Новая
       36

Конструктор Вызывается дважды в Компонент угловой 7

0 голосов
/ 30 октября 2019

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

 const routes: Routes = [
  { path: '', redirectTo: 'tenant', pathMatch: 'full' },
  { path: 'tenant', component: TenantinfoComponent },
  { path: 'tenant/:siteName', component: TenantinfoComponent },
  { path: 'tenant/:siteName/:unitId', component: TenantinfoComponent },
  { path: 'personal/:proId/:conId', component:  PersonalInfoComponent,
    children: [
      {path: 'emp', component: EmployerComponent },
      {path: 'otherinfo', component: OtherinfoComponent },
      {path: 'legal', component: LegalComponent },
      {path: 'docs', component: DocusignComponent },
      {path: 'payment', component: PaymentComponent }
    ]
  },

ЭтоВот как выглядит мой файл маршрутизации. 

<div class="personal-info-main" [ngClass]="shared.submittedAppsPage || shared.isConfirmationPage? 'personal-info-main-border' : ''">

    <rp-tabs  (onDeleteClick)="onTabRemoved($event)" (onTabSelected)="onTabSelected($event)" [tabsData]=tabs *ngIf="!shared.submittedAppsPage && !shared.isConfirmationPage">
        <rp-tab [tabTitle]="tab.title" id="tab{{i}}" [active]="tab.active" *ngFor="let tab of tabs;let i=index">
          <div *ngIf="shared.isNextClicked">




            <!-- emp tab -->
            <div *ngIf="((tab.type === 'primary' && selectedTabIndex === i && tab.active === true) || (tab.type !== 'primary' && tabs.length === 1 && tab.active === true)) && showEmpsTab && !isNotApplicable">

                <router-outlet></router-outlet>
                <!-- emp data here -->
            </div>


            <!-- //otherinfo tab -->
            <div *ngIf="((tab.type === 'primary' && selectedTabIndex === i && tab.active === true) || (tab.type !== 'primary' && tabs.length === 1 && tab.active === true)) && showOtherInfoTab  && !isNotApplicable">

                <router-outlet></router-outlet>
            </div>


            <!-- //Legal tab -->
            <div *ngIf="((tab.type === 'primary' && selectedTabIndex === i && tab.active === true) || (tab.type !== 'primary' && tabs.length === 1 && tab.active === true)) && showLegalTab && !isNotApplicable">

                <router-outlet></router-outlet>
            </div>

             <!-- docusign tab -->
            <div *ngIf="((tab.type === 'primary' && selectedTabIndex === i && tab.active === true) || (tab.type !== 'primary' && tabs.length === 1 && tab.active === true)) && showDocusignTab && !isNotApplicable">

                <router-outlet></router-outlet>
            </div>

             <!-- payment tab -->
             <div *ngIf="(tab.type === 'primary' && selectedTabIndex === i && tab.active === true) && showPaymentTab && !isNotApplicable">


                  <router-outlet></router-outlet>
            </div>
          </div>
        </rp-tab>
    </rp-tabs>

</div>

Это мой HTML, основанный на том, что пользователь может добавить n вкладок, и на каждой из них мы должны показать все эти страницы, чтобы на каждой странице был свой выход для маршрутизатора. 

    <div *ngIf="!shared.isDataAvailable && shared.isDocusign">
  <rp-busyindicator></rp-busyindicator>
</div>
<div class="parent-container">
  <div class="main" id="main">
    <app-cards *ngIf="!checkRoute()"></app-cards>
    <div class="content">
      <app-header *ngIf="!checkRoute()"></app-header>
      <div class="property m-t-20" [ngClass]="!checkRoute() ? 'content-border' : ''">
        <router-outlet></router-outlet>
        <!-- <app-footer *ngIf="!checkRoute()"></app-footer> -->
      </div>
    </div>
    <div class="footer" *ngIf="!checkRoute()">
      <app-navigation></app-navigation>
      <app-footer *ngIf="!checkRoute()"></app-footer>
    </div>
  </div>
  <!-- <app-previewpersonal></app-previewpersonal> -->
</div>

Это моя главная страница с нижним колонтитулом и компонентом personalinfo, поэтому у меня есть два маршрутизатора, один для личной информации, а другой для childs

1 Ответ

0 голосов
/ 30 октября 2019

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

<div
  class="personal-info-main"
  [ngClass]="shared.submittedAppsPage || shared.isConfirmationPage? 'personal-info-main-border' : ''">

  <rp-tabs
    (onDeleteClick)="onTabRemoved($event)"
    (onTabSelected)="onTabSelected($event)"
    [tabsData]="tabs"
    *ngIf="!shared.submittedAppsPage && !shared.isConfirmationPage">
    <rp-tab
      [tabTitle]="tab.title"
      id="tab{{i}}"
      [active]="tab.active"
      *ngFor="let tab of tabs;let i=index">
      <div>
        <router-outlet></router-outlet>
      </div>
    </rp-tab>
  </rp-tabs>

</div>
...