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: []
},

标头上包含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] */
     }
   ];`

但是实际的路由必须是这样的：   本地主机：4200 / home / general-setup

和localhost：4200 / home / pms-setup

Answer 1

您的routerLink参数NetworkBoundResource为您提供相对于当前URL的URL ['general-setup', 'pms-setup']。因此，当您进入general-setup/pms-setup时，结果很好。

如果您想从/home路线（或其他路线）中选择/general-setup/pms-setup，则必须指定/home。

如果您希望的路线是静态的，建议您使用['/general-setup', 'pms-setup']而不是单个路段。

编辑： 您有两条路线['/general-setup/pms-setup']和/home/general-setup。这两种方式无法通过您的方式解决。您的数组被合并到单个URL的段中。如果您想解决其他问题，也许this提供了一些帮助。

阵列的角度路由器链接不起作用

1 个答案: