Question

我试图导航到我的应用程序中的付款页面，但是从docs页面中调用了付款构造函数两次，但是从车辆到docs构造函数中的文档导航只调用了一次。

 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>

这是我基于用户可以添加n个标签的html，每个标签我们都应显示所有这些页面，以便每个页面都有其路由器出口。

    <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，一个用于个人信息，另一个用于儿童

构造函数在分量角7

0 个答案: