Angular应用程序中不同角色的不同仪表板视图

Question

我现在有一个具有6个用户角色的应用程序，将来可能会增加，对于每个用户角色，我都有不同的仪表板视图。

目前，我已经通过在登录时标识用户角色，然后根据该用户角色更改仪表板视图（同时保持每个角色（例如，“ / dashboard”）的路由相同）来处理此方案。

我这样做是因为更改并不重要，我只需要隐藏一部分是一个角色，再添加另一个角色即可。 现在，由于复杂性在增加，因此在单个打字稿文件中处理所有dashbaords视图变得越来越困难。

我是否应该为所有角色设置不同的路线，或者您会建议采用任何其他方法更有效地处理这种情况？

Answer 1

您可以使用动态组件加载器 。

dashboard.component.ts 添加了一些参考代码：

@Component({
    selector: 'dashboard',
    template: `
        <ng-template dashboardHost></ng-template>
    `
})
export class DashboardComponent {

    private _dashboard: DashboardItem;

    get dashboard(): DashboardItem {
        return this._dashboard;
    }
    @Input()
    set dashboard(dashboard:DashboardItem){
        if(this._dashboard != dashboard) {
            this._dashboard = dashboard;
            this.loadDashboard();
        }
    }

    @ViewChild(DashboardDirective) dashboardHost: DashboardDirective;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) {
    }

    loadDashboard() {
        const dashboardItem = this.dashboard;

        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(dashboardItem.component);

        const viewContainerRef = this.dashboardHost.viewContainerRef;
        viewContainerRef.clear();
        viewContainerRef.createComponent(componentFactory);
    }
}

仪表板项目

import {Type} from '@angular/core';

export class DashboardItem {
  constructor(public component: Type<any>, public data: any) {}
}

dashboard.directive.ts 创建指令为：

import {Directive, ViewContainerRef} from '@angular/core';

@Directive({selector: '[dashboardHost]'})
export class DashboardDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

用途：

<dashboard [dashboard]="Dashboard"></dashboard>

get Dashboard() {
    // add your logic here
}