构造函数在分量角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>

这是我的主页，具有页眉页脚和personalinfo组件，所以我有两个routeroutlet，一个用于个人信息，另一个用于子级

Answer 1

请您从div中删除* ngIf =“ shared.isNextClicked”并再次进行测试。当您对router-outlet的父元素有某些条件时，它可以调用两次，并且您的条件有时可能返回false。