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

Вы можете создать 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);
  }
}

Надеюсь это поможет.

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

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

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

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

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

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

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

Очень хорошим решением может быть «Использовать защиту авторизации». Вы можете попробовать реализовать интерфейсы 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
  }
}