Угловой 2: Как условно загрузить компонент в маршруте асинхронно?

Question

Я хотел бы асинхронно подключить компонент к маршруту, с условием.

В следующем примере, который работает (но асинхронная), загружает один компонент или другой в зависимости от роли пользователя:

import { UserDashboardComponent } from './user-dashboard.component' 
import { AdminDashboardComponent } from './admin-dashboard.component' 

const role = 'admin' // Just for the example 
const comp = role === 'admin' ? AdminDashboardComponent : UserDashboardComponent 

const routes: Routes = [ 
    { path: '', component: comp }, 
] 

Но, допустим, мы хотим, чтобы получить роль из API, таким образом, асинхронный. Каков способ этого достичь?

Answer 1

Угловой 2 поддерживает ленивую загрузку на уровне модуля. Функциональные модули загружаются асинхронно, а не компонент. Вы можете создать этот компонентный модуль. https://angular.io/docs/ts/latest/guide/ngmodule.html

Answer 2

Советуем использовать программную навигацию, используя навигационный метод маршрутизатора. Таким образом, вы перечисляете все возможные маршруты в файле маршрутизатора. Затем в своем компоненте вы вызываете router.navigate() на основе конкретного случая.

Answer 3

Вы можете просто определить компонент более высокого уровня f.e. DashboardComponent, который включен в маршрут/приборные панели

Затем родительский компонент должен загружать дочерние элементы в своем шаблоне на основе асинхронного состояния.

Таким образом вам также понадобится использовать * ngIf, но, по крайней мере, не загромождать шаблоны дочерних компонентов.

Answer 4

Вы можете использовать Resolve: https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

Существует официальный пример, который показывает, как сделать перенаправление с Resolve: https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard

Answer 5

Вы можете создать generic.module.ts, которые будут иметь оба компонента в объявлениях массива:

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { UserDashboardComponent } from './user-dashboard.component' 
import { AdminDashboardComponent } from './admin-dashboard.component  

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ UserDashboardComponent,AdminDashboardComponent ] 
}) 
export class GenericModule { } 

Таким образом, у вас будет модуль, содержащий модули, которые вы хотите загрузить.

Теперь следующий шаг будет загружать их асинхронны с помощью компилятора: внутри компоненты сделайте следующее:

import {GenericModule} from './generic.module'; 
import { Component, Input,ViewContainerRef, Compiler, NgModule,ModuleWithComponentFactories,OnInit,ViewChild} from '@angular/core'; 
@Component({ 
    selector: 'generic', 
    template: '<div #target></div>' 
}) 
export class App implements AfterViewInit { 
    @ViewChild('target', {read: ViewContainerRef}) target: ViewContainerRef; 

    constructor(private compiler: Compiler) {} 

    ngAfterViewInit() { 
    this.createComponent('<u>Example template...</u>'); 
    } 

    private createComponent(template: string,role:string) { 
    @Component({template: template}); 
    const mod = this.compiler.compileModuleAndAllComponentsSync(GenericModule); 
    const factory = mod.componentFactories.find((comp) => 
    //you can add your comparison condition here to load the component 
    //for eg. comp.selector===role where role='admin' 
    ); 
    const component = this.target.createComponent(factory); 
    } 
} 

Надеется, что это помогает.

Answer 6

Поскольку вы будете использовать один маршрут для любого компонента, одно решение создать еще один компонент для этого маршрута, то его шаблон может относиться к обоим компонентам, но с ngIf, как показано ниже:

<user-dashboard *ngIf="role==='user'"></user-dashboard> 
<admin-dashboard *ngIf="role==='admin'"></admin-dashboard> 

Answer 7

Очень хорошее решение может «Использовать auth-guard». Вы можете попробовать реализовать интерфейсы CanActivate/CanLoad и поместить свое условие в этот класс.

Исходя из условия, маршруты активируются.

Пример:

import { Injectable }  from '@angular/core'; 
import { 
    CanActivate, 
    ActivatedRouteSnapshot, 
    RouterStateSnapshot 
}       from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import { Router } from '@angular/router'; 

@Injectable() 
export class AuthorizationGuard implements CanActivate { 
    constructor() {} 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
     Observable<boolean> { 
    let url: string = state.url; 
    return this.canbeLoaded(url); 
    } 

    canbeLoaded(url: string): Observable<boolean> { 
    return Observable.of(true); //put your condition here 
    } 
}