Angular 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

Angular 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

很好的解决办法是“使用验证码”。您可以尝试实现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 
    } 
}