以角度添加动态路径

Question

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

我如何动态创建协议。如您所见，它是静态的。我还附上了屏幕截图，以查看其外观。

截图

应用路线

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 {}

Answer 1

我希望我能正确回答你的问题。您可以执行以下操作：

1。知道协议后将其存储在服务中：

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

2。生成一个新的防护，将协议的路径更改为agreement/:agreement并添加canActivate[YourGuard]

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

3。实施YourGuard

1. [如果不存在.../agreement/<agreement>，则用户不能导航到<agreement>的必要条件
2. 如果在服务等级中找到协议，则返回true，否则返回false
3. [请注意，我还添加了this.router.navigate(('' as unknown) as any[])，以避免被重定向到空白页。这是一个似乎对我有用的已知问题的解决方法。我写了更多有关它的内容here

export class YourGuard implements CanActivate {
    constructor(private yourService: YourService, private router: Router) {}

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): boolean {
        const param = next.paramMap.get('agreement');
        if (!!this.yourService.agreements.find(a => a.id === param)) {
            return true;
        } else {
            this.router.navigate(('' as unknown) as any[]);
            return false;
        }
    }
}

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

为了测试此程序，我构建了一个简单版本的应用程序，因此routerLink可能有所不同：

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

我希望这个答案解决了您的问题。随时询问是否尚不清楚。