Question

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

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

我这样做是因为变化不是主要的，我只需要隐藏某个部分是一个角色并添加其他角色。现在因为复杂性正在增加，所以在单个打字稿文件中处理所有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);
    }
}

<强>仪表板item.ts

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
}

Angular应用程序

1 个答案: