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
}