Angular 来自阵列的路由器链接不工作

Question

这是代码。

headers: Header[] = [
// tslint:disable-next-line:max-line-length
{
  parentTitle: ['Settings'], childTitle: ['General Setup', 'PMS Setup', 'Crewing Setup', 'Purchase Setup', 'Safety Setup',
    // tslint:disable-next-line:max-line-length
    'RA Setup', 'RH Setup', 'Voyage Setup'], siblingTitleOne: ['Vessel', 'Port', 'Owner', 'Engine Type', 'Vessel Type'], siblingTitleTwo: [
      'Component Main', 'Component', 'Inventory Main', 'Inventory', 'Job category', 'Location Onboard'
    ],
  titleIcon: 'ft-settings', url: ['general-setup', 'pms-setup']
},
{ parentTitle: ['Data Sync'], childTitle: [], siblingTitleOne: [], siblingTitleTwo: [], titleIcon: 'ft-zap', url: [] },
{
  parentTitle: ['PMS'], childTitle: [], siblingTitleOne: [], siblingTitleTwo: [], titleIcon: 'ft-layers', url: []
},

关于 header 包含 url[]，似乎无法使用 angular routerLink。

说说我的使用方法吧

<div *ngIf="header.parentTitle.length > 0" id="parentTitle" [ngbCollapse]="parentCollapsed" data-target="#siblingTitle" (click)="childCollapsed = !childCollapsed">
        <li *ngFor="let childTitle of header.childTitle">
          <a [routerLink] ="header.url">
            <span class="menu-childTitle">{{childTitle | uppercase}}</span>

header.url 没有使用我从数组中提供的正确 url 进行传播。它像这样加载。 localhost:4200/home/general-setup/pms-setup

const routes: Routes = [
 {
 path: 'home', component: HomeComponent,
  children: [
  {
    path: 'general-setup', component: GeneralSetupComponent,
    children: [
      {
        path: '', component: VesselDetailsComponent, outlet: 
'vesselDetails'
      },
      { path: '', component: AddVesselComponent, outlet: 'addVessel' 
},
      { path: '', component: AddPortComponent, outlet: 'addPort' },
      { path: '', component: AddOwnerComponent, outlet: 'addOwner' },
      { path: '', component: AddEngineTypeComponent, outlet: 
'addEngineType' },
      {
        path: '', component: AddVesselTypeComponent, outlet: 
'addVesselType'
      }
    ]
  } /* {
    path: 'general-setup',
    loadChildren: 'src/app/module/setup/general-setup/general- 
 setup.module#GeneralSetupModule'
  } */
  , {
    path: 'pms-setup', component: PmsSetupComponent,
    children: [
      {
        path: '', component: PmsComponentComponent, outlet: 
  'addPmsComponent'
      },
      { path: '', component: PmsComponentMainComponent, outlet: 
  'addPmsCompoentMain' },
      { path: '', component: PmsInventoryComponent, outlet: 
  'addPmsInventory' },
      { path: '', component: PmsInventoryMainComponent, outlet: 
  'addPmsInventoryMain' },
      { path: '', component: PmsJobCategoryComponent, outlet: 
  'addPmsJobCategory' },
      {
        path: '', component: PmsLocOnboardComponent, outlet: 
  'addPmsLocOnboard'
      }
    ]

     }
   ]
 }];

主要路线

 `const signIn: Routes = [
    {
  path: '',
  redirectTo: '/welcome',
  pathMatch: 'full',
    },
  {
  path: 'welcome',
  component: WelcomeComponent
   }, {
  path: 'home',
  component: HomeComponent/* , canActivate: [AuthGuard] */
     }
   ];`

But the actual routing must be like this: localhost:4200/home/general-setup

and localhost:4200/home/pms-setup

Answer 1

您的 routerLink 参数 ['general-setup', 'pms-setup'] 为您提供相对于当前 url 的 url general-setup/pms-setup。因此，当您处于 /home 时，结果完全是 o.k。

如果您想要 /home 路线（或任何其他路线）的 /general-setup/pms-setup，则必须指定 ['/general-setup', 'pms-setup']。

如果您想要的路线是静态的，我建议您使用 ['/general-setup/pms-setup'] 而不是单独的路段。

编辑： 您有两条路线 /home/general-setup 和 /home/pms-setup。这两个无法按照您的方式解决。您的数组被组合成单个 url 的段。如果您想解决不同的渠道，也许会提供一些帮助。

Answer 2

我已经更改了 Header 界面以包含嵌套 url。喜欢下面的。

export interface Header {
  parentTitles: string;
  childHeaders: ChildHeader[];
  icon: string;
  url: string;
}

export interface ChildHeader {
 childTitles: string;
 siblingHeaders: SiblingHeader[];
 icon: string;
 url: string;
}


export interface SiblingHeader {
 siblingTitles: string[];
 icon: string;
 url: string;
}

在 HTML 页面上，我添加了如下内容。

 <div class="main-menu-content" data-toggle="collapse" data-target="#parentTitle" (click)="parentCollapsed = !parentCollapsed"
    [attr.aria-expanded]="!parentCollapsed">
    <li *ngFor="let header of headers">
      <div>
        <a> <i class="header-icons" [ngClass]="[header.icon]"></i>
          <span class="menu-parentTitle">{{header.parentTitles | uppercase}}</span><span><i class="fa fa-angle-right"></i></span>
        </a>
      </div>
      <div *ngIf="header.childHeaders" id="parentTitle" [ngbCollapse]="parentCollapsed" data-target="#siblingTitle"
        (click)="childCollapsed = !childCollapsed">
        <li *ngFor="let childHeader of header.childHeaders">
          <a [routerLink]="[childHeader.url]">
            <span  *ngIf="childHeader.childTitles"  class="menu-childTitle">{{ childHeader.childTitles | uppercase}}</span>

所以Header接口可以解决url路由的问题

<a href="some.url"></a> 不会单独循环，如果在 <li> 循环中很难得到 url。

Angular 来自阵列的路由器链接不工作

Angular routerlink from array not working

angular

typescript

angular-ui-router