Question

好的，我在6.9中有一个Angular应用程序，并且有一个muenu项目：“ Instellingen”和一些子菜单项目，例如：

'account'
'appertaten'
'Apps'

每个子菜单项都有其“吼声”部分。所以

这是三个组成部分：

<app-settings-general></app-settings-general>
  <app-settings-account ></app-settings-account>
  <app-selfcare ></app-selfcare>

我当然搜索了很多。但是我什么都没找到

所以我刚才说的。我有三个组件（子菜单项）：

<app-settings-general></app-settings-general>
  <app-settings-account ></app-settings-account>
  <app-selfcare ></app-selfcare>

但是我现在用ngIf来检查必须加载的子菜单项：

所以我这样做：

<app-settings-navigation></app-settings-navigation>

<app-vital10-page [noTopBar]="true">
  <app-settings-general *ngIf="subSection === 'algemeen'"></app-settings-general>
  <app-settings-account *ngIf="subSection === 'account'"></app-settings-account>
  <app-selfcare *ngIf="subSection === 'apparaten'"></app-selfcare>
  <app-settings-apps *ngIf="subSection === 'apps'"></app-settings-apps>
  <app-settings-add-organisation *ngIf="subSection === 'organisatie'"></app-settings-add-organisation>
  <app-settings-log *ngIf="subSection === 'log'"></app-settings-log>
  <app-settings-indicator-permissions *ngIf="subSection === 'indicatiepermissies'"></app-settings-indicator-permissions>
</app-vital10-page>

我有一个app.route.module，在这里我是这样的：

{
    path: 'instellingen/:settings',
    component: SettingsComponent,
    canActivate: [AuthGuard]
  },

但是我认为这不是加载子菜单项的最佳方法。

因为我想要这样的东西：

   {
     path: 'instellingen/:settings',
     component: SettingsAccountComponent,
     canActivate: [AuthGuard],
     children: [
       { path:  'account', component: SettingsAccountComponent },
       { path:  'algemeen', component: SettingsGeneralComponent },
     ]
   },

但这不起作用。

所以我的问题是：

如何改进此代码：

<app-vital10-page [noTopBar]="true">
  <app-settings-general *ngIf="subSection === 'algemeen'"></app-settings-general>
  <app-settings-account *ngIf="subSection === 'account'"></app-settings-account>
  <app-selfcare *ngIf="subSection === 'apparaten'"></app-selfcare>
  <app-settings-apps *ngIf="subSection === 'apps'"></app-settings-apps>
  <app-settings-add-organisation *ngIf="subSection === 'organisatie'"></app-settings-add-organisation>
  <app-settings-log *ngIf="subSection === 'log'"></app-settings-log>
  <app-settings-indicator-permissions *ngIf="subSection === 'indicatiepermissies'"></app-settings-indicator-permissions>
</app-vital10-page>

没有ngIf

谢谢

带有ngIf子菜单的菜单

0 个答案: