使用数据进行制表符/导航创建的角负载子项

问题描述

我正在尝试建立一个多级导航SPA。

想法是使用data中的router.module.ts块来构建标签并使用loadChildren()动态加载子路由。然后，导航栏中的每个项目都应在侧边栏菜单的本地routing.module上循环。

在最高级别（有效）app-routing.module.ts

const routes: Routes = [
  {
    path: 'ci',component: CustInfoComponent,loadChildren: () => import('@_s_forms/cust-info/cust-info.module').then( m => m.CustInfoModule),data: {
      isTab:   true,tabName: 'Project @R_407_4045@ion',tabHint: ''
    }
  },{
    path: 'dd',component: DeploymentDetailsComponent,tabName: 'Deployment (vm) Details',tabHint: 'VMs to be deployed'
    }
  },{
    path: 'ei',component: ExtraInfoComponent,tabName: 'Additional @R_407_4045@ion',{
    path: '',redirectTo: MT4SizingConstants.startTab,pathMatch: 'full',data: { isTab: false }
  },{ path: '**',redirectTo: '',data: { isTab: false } }
];

@NgModule({
  imports: [RouterModule.forRoot(routes,{ enableTracing: false })],exports: [RouterModule]
})
export class AppRoutingModule {}

相应的导航栏ts和html如下：

export class HeaderComponent implements OnInit {
  /*
   Nav bar menu generated from route module via router.config.filter.
   Looks for isTab == true.

   Child routes can be added if required
   */


  startTab     = '';
  projectTitle = MT4SizingConstants.projectTitle;
  kNownRoutes: Routes;


  constructor(
    private @R_456_4044@Service: @R_456_4044@Service,private router: Router,private location: Location,) {
    this.kNownRoutes = router.config.filter(
      qq => { if ( qq.data.isTab ) { return true; } }
    );
    this.startTab    = this.kNownRoutes[ 0 ].path;
  }

  ngOnInit(): void {
    this.location.go(this.startTab);
  }

  onTabChange(e): void {
    this.router.navigateByUrl(e);
  }
}

html：

 <div class="d-flex ">
    <ul ngbNav #nav="ngbNav" [(activeId)]="startTab"
        (activeIdChange)="onTabChange($event)"
        class="nav-pills  "
        orientation="horizontal" destroyOnHide="false">
      <li *ngFor="let tabItem of kNownRoutes;"
          [ngbNavItem]="tabItem.path"
          class="active"
      >
        <a ngbNavLink class="nav-link nav-link-color">{{tabItem.data.tabName}}</a>
        <ng-template ngbNavContent>
          <div>
            <router-outlet></router-outlet>
          </div>
        </ng-template>
      </li>
    </ul>
  </div>
  <div style="alignment: right">
    <h4>{{projectTitle}}</h4>
  </div>
</div>
<div [ngbNavOutlet]="nav" class="ml-4"></div>

这将创建主要的导航栏：

这是孩子的路由模块：

const ciRoutes: Routes = [
  {
    path: 'cust_details',component: CustomertDetailsComponent,tabName: 'Customer Details',{
    path: 'proj_details',component: ProjectDetailsComponent,tabName: 'Project Details',redirectTo: 'proj_details',data: { isTab: false } }
];

@NgModule({
  imports: [RouterModule.forChild(ciRoutes)],exports: [RouterModule]
})
export class CustInfoRoutingModule {}

我无法访问ciRoutes中的数据，该数据将允许像创建主导航栏一样构建侧边菜单。

如果我可以访问当前路线的索引，或者以某种方式get ciRoutes都可以。

如果您只需一个导航元素，此设置就可以正常工作。

感谢您的时间

解决方法

由于不能同时声明“ component”和“ loadChildren”属性，因此可以从将CustInfoComponent路由添加到CustInfoModule路由模块开始。

然后将延迟加载的模块中已经存在的路由添加为CustInfoComponent子组件，以便您可以从CustInfoComponent通过ActivatedRoute访问当前活动的路由的子组件。

CustInfoRoutingModule如下所示：

const ciRoutes: Routes = [
  {
    path: '',component: CustInfoComponent,children: [
      {
        path: 'cust_details',component: CustomertDetailsComponent,data: {
          isTab:   true,tabName: 'Customer Details',tabHint: ''
        }
      },{
        path: 'proj_details',component: ProjectDetailsComponent,tabName: 'Project Details',{
        path: '',redirectTo: 'proj_details',pathMatch: 'full',data: { isTab: false }
      },]
  },{ path: '**',redirectTo: '',data: { isTab: false } }
];

@NgModule({
 imports: [RouterModule.forChild(ciRoutes)],exports: [RouterModule]
})
export class CustInfoRoutingModule {}

,

我通过简单地从每个儿童路由器模块中导出路由对象解决了该问题。然后，我可以将路由对象导入父对象并生成必要的选项卡，并根据需要生成<router-outlet></router-outlet>。

在上面的示例中，只需将路由对象导出即可。我敢肯定有一种更优雅的方法可以完成此操作，但是它对我有用，恕我直言，易于维护。

export const ciRoutes: Routes = [....]

我还能够为要生成的按钮/导航项创建一个简单的模板：

这是html：

<div class="d-flex ">
  <ul ngbNav #ddNav="ngbNav" [(activeId)]="startTab"
      (activeIdChange)="onTabChange($event)"
      class="nav-pills"
      orientation="horizontal" destroyOnHide="false">
    <li *ngFor="let iMenu of knownRoutes;"
        [ngbNavItem]="iMenu.path"
        class="active"
    >
      <a ngbNavLink [routerLink]="iMenu.path"
         class="nav-link nav-link-color">{{iMenu.data.tabName}}</a>
    </li>
  </ul>
</div>

组件对象：

import { Component,Input,OnInit } from '@angular/core';
import { Router,Routes }           from '@angular/router';

@Component({
  selector: 'mt4-sizing-menu-template',templateUrl: './menu-template.component.html',styleUrls: ['./menu-template.component.scss']
})
export class MenuTemplateComponent implements OnInit {
  @Input('allRoutes') InputRoutes: Routes;

  knownRoutes: Routes;
  startTab = '';

  constructor(
    private router: Router,) { }

  ngOnInit(): void {
    this.knownRoutes = this.InputRoutes.filter(
      qq => { if ( qq.data.isTab ) { return true; } }
    );
    this.startTab    = this.knownRoutes[ 0 ].path;
  }
  onTabChange(e): void {
    this.router.navigateByUrl(e);
  }
}

使用模板

<mt4-sizing-menu-template [allRoutes]="lRoutes"></mt4-sizing-menu-template>
<router-outlet class="al2-nav2-background "></router-outlet>

以及上面html的必需组件

import { Component} from '@angular/core';
import { Routes}    from '@angular/router';
import { ciRoutes}  from '@_s_forms/customer-info/customer-info-routing.module';

@Component({
  selector:    'mt4-sizing-customer-info',templateUrl: './customer-info.component.html',styleUrls:   ['./customer-info.component.scss']
})
export class ProjectInfoComponent {
    
  lRoutes: Routes = ciRoutes;

  constructor() {}
}