構造函數在組件 angular 7 中調用了兩次

Question

我試圖導航到我的應用程序中的付款頁面，但在這種情況下從文檔頁面調用付款構造函數兩次，但在文檔構造函數中從車輛到文檔導航僅調用一次。

 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>

這是我的主頁，其中有 header 頁腳和個人信息組件，所以我有兩個路由器出口，一個用於個人信息，另一個用於孩子

Answer 1

當您對 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>