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 中，我想要类似当我访问像 site.com/abcd 这样的 URL 时，它会首先检查路由参数 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-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;

Answer 2

问题是您在公共组件中调用 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']);