如何在 angular 中的 api 响应后延迟加载模块？

Question

我想在 API 响应后延迟加载模块

以下是我的路线

const routes: Routes = [
  { path: "", component: LandingComponent },
  { path: 'student', loadChildren: () => import('./student.module').then(m => m.StudentModule) },
  { path: 'school', loadChildren: () => import('./school.module').then(m => m.SchoolModule) },
  { path: "**", component: PagenotfoundComponent }
];

我想要的是像 Facebook 那样处理个人资料

facebook。com/ABCD 是我的个人资料 （不同的模块）

facebook.com/EFGH 是我的页面 （另一个不同的模块）

在angular中，当我访问这样的URL站点时，我想要一些东西。com/abcd它会首先检查路由参数abcd 是用户个人资料或机构页面，然后根据响应延迟加载学生或学校模块

我对此有一些想法，比如制作一个通用组件，然后在该组件中进行 API 调用并检查路由参数是学生资料还是学校资料，然后相应地加载它们的组件，如下所示

const routes: Routes = [
  { path: "", component: LandingComponent },
  { path: ':profile_token', component : CommonComponent },
  { path: "**", component: PagenotfoundComponent }
];

然后在 CommonComponent

<ng-container *ngIf="isProfileRoute">
         <app-user-profile></app-user-profile>
</ng-container>

<ng-container *ngIf="isSchoolRoute">
         <app-school-profile></app-school-profile>
</ng-container>

但是在这个方法中，你可以看到两个组件都在加载，我觉得这不是处理它的好方法因此，如果有什么方法可以延迟加载包含基于 API 调用的路由和组件的整个模块，那将非常有用。

Answer 1

问题是您在公共组件中调用了 app-user-profile 和 app-school-profile。如果您希望 Angular 在调用路由后立即延迟加载您的模块，您必须使用 Angular 路由器 (https://angular.io/guide/router)。

您必须指定路由器应在何处创建内容。在您的公共组件中，您必须创建一个路由器重定向到个人资料或学校路线：

this.router.navigate(['either the url of profile or the url of school']);

Answer 2

也许路由中的动态加载对您有帮助？

应用-routing.module.ts:

           {
                path: ':profile_token',
                loadChildren: async () => {
                    const service = AppInjector.get(YourService);
                    if (service.isStudent()) {
                        const a = await import('./modules/student/student.module');
                        return a['StudentModule'];
                    }
                    const b = await import('./modules/school/school.module');
                    return b['SchoolModule'];
                }
            }

在 AppRoutingModule 中：

export class AppRoutingModule {
    constructor(private injector: Injector) {
        AppInjector = this.injector;
    }
}

在路由数组之前：

export let AppInjector: Injector;

如何在 angular 中的 api 响应后延迟加载模块？

How to lazy load module after api response in angular?

angular-routing

angular

angular5

angular7

angular8