Как лениво загрузить модуль после ответа API в angular? - PullRequest
Новая
       64

Как лениво загрузить модуль после ответа API в angular?

0 голосов
/ 07 февраля 2020

Я хочу лениво загрузить модуль после ответа 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-адресу, например site.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, это будет действительно здорово и полезно.

Ответы [ 2 ]

2 голосов
/ 07 февраля 2020

Может, динамическая c загрузка в маршрутизации может вам помочь?

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;
0 голосов
/ 07 февраля 2020

Проблема в том, что вы вызываете app-user-profile и app-school-profile в вашем общем компоненте. Если вы хотите, чтобы Angular отложил загрузку вашего модуля, как только будет вызван маршрут, вы должны использовать Angular Router (https://angular.io/guide/router).

Вы должны указать, где маршрутизатор должен создавать контент. В вашем обычном компоненте вы должны создать перенаправление маршрутизатора либо на профиль, либо на школьный маршрут: 

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