Angular 在角节点中添加动态管线

我已经在angular 8应用程序中创建了父级和子级管线。我的一个孩子的路线叫做协议，需要是动态的。这意味着如果有三个协议，应该有三个sidenav菜单 显示到单个页面的路线。例如协议1、协议2、协议3等。在加载协议组件时，我会知道协议的数量

如何动态创建协议。正如你现在看到的，它是静态的。我还附上了截图，看看它是如何出现的

截图

app.route

import { Routes } from '@angular/router';
import { NgxPermissionsGuard } from 'ngx-permissions';
import { MsalGuard } from '@azure/msal-angular';

import { SecurityPermissions } from './shared/constants/securityPermissions';
import { HomeGuard } from './shared/services/home.guard';

export const AppRoutes: Routes = [
  {
    path: '',
    loadChildren: './modules/client-home/client-home.module#ClientHomeModule',
    canActivate: [HomeGuard]
  },
  {
    path: 'client-home',
    loadChildren: './modules/client-home/client-home.module#ClientHomeModule',
    canActivate: [MsalGuard, NgxPermissionsGuard],
    data: {
      permissions: {
        only: [SecurityPermissions.organisation.AccessOrganisation]
      }
    }
  },
  {
    path: 'individual-business-application',
    loadChildren: './modules/iba/iba.module#IbaModule',
    canActivate: [MsalGuard, NgxPermissionsGuard],
    data: {
      permissions: {
        only: [
          SecurityPermissions.iba.CompleteIba,
          SecurityPermissions.iba.ViewIbaSummary
        ]
      }
    }
  },
  { path: '**', redirectTo: '/' }
];

iba儿童路线

const ibaRoutes: Routes = [
  {
    path: '',
    canActivate: [IbaGuard],
    component: IbaComponent,
    resolve: { model: IbaResolve },
    children: [
      {
        path: '', redirectTo: 'summary'
      },
      {
        path: 'load/:clientRef',
        component: ContactComponent,
        data: { hidden: true }
      },
      {
        path: 'contact',
        component: ContactComponent,
        data: {
          title: '1. Contact',
          role: [SecurityPermissions.iba.CompleteIba],
          order: 1,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
      {
        path: 'address',
        component: AddressComponent,
        data: {
          title: '2. Address',
          role: [SecurityPermissions.iba.CompleteIba],
          order: 2,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
      {
        path: 'employment',
        component: EmploymentComponent,
        data: {
          title: '3. Employment',
          role: [SecurityPermissions.iba.CompleteIba],
          order: 3,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
      {
        path: 'fitness',
        component: FitnessComponent,
        data: {
          title: '4. Fitness',
          role: [SecurityPermissions.iba.CompleteIba],
          order: 4,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
      {
        path: 'identification-questions',
        component: IdentificationComponent,
        canActivate: [NgxPermissionsGuard],
        data: {
          title: '5. Identification',
          permissions: {
            only: [SecurityPermissions.iba.UploadIbaIdentification]
          },
          role: [SecurityPermissions.iba.UploadIbaIdentification],
          order: 5,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
      {
        path: 'additional-information',
        component: AdditionalInformationComponent,
        canActivate: [NgxPermissionsGuard],
        data: {
          title: 'Additional Information',
          permissions: {
            only: [SecurityPermissions.iba.UploadIbaIdentification]
          },
          role: [SecurityPermissions.iba.UploadIbaIdentification],
          order: 6,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: true
        }
      },
      {
        path: 'agreement',
        component: MultiAgreementComponent,
        data: {
          title: '6. Agreement',
          order: 7,
          sectionName: SectionNames.iba,
          baseAddress: 'individual-business-application',
          hidden: false
        }
      },
    ]
  }
];

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

---

我希望我没有弄错你的问题。以下是您可以做的事情：

1。一旦知道协议，就立即将其存储到服务中：

yourService.agreements = [{ id: '1' }, { id: '2' }, { id: '3' }];

2。生成新的保护，将协议路径更改为

agreement/：agreement

，并添加

canActivate[YourGuard]

...
    path: 'agreement/:agreement',
    canActivate: [YourGuard],
...

3。实施

YourGuard

...
    path: 'agreement/:agreement',
    canActivate: [YourGuard],
...

必要时，用户无法导航到

../agreement/

4。现在，您可以在组件中获得协议

export class MultiAgreementComponent implements OnInit {
    agreement: { id: string };

    constructor(
        private activatedRoute: ActivatedRoute,
        private yourService: YourService
    ) {}

    ngOnInit(): void {
        const param = this.activatedRoute.snapshot.paramMap.get('agreement');
        this.agreement = this.yourService.agreements.find(a => a.id === param);
    }
}

5。要列出组件的所有链接，只需使用

*ngFor

...
    path: 'agreement/:agreement',
    canActivate: [YourGuard],
...

为了测试这一点，我为您的应用程序构建了一个简单版本，因此，

routerLink

可能会有所不同：

<div *ngFor="let agreement of yourService.agreements">
  <a routerLink="agreement/{{ agreement.id }}">
    Agreement {{ agreement.id }}
  </a>
</div>

协议{{Agreement.id}

---

我希望这个答案解决了你的问题。请随时询问是否有不清楚的地方。

需要更多信息来帮助，协议从何而来？什么决定了哪些是可用的？它们是组件还是动态构建的？