Различные виды dashbard для разных ролей в приложении Angular - PullRequest
Новая
       22

Различные виды dashbard для разных ролей в приложении Angular

0 голосов
/ 11 июня 2018

У меня сейчас приложение с 6 пользовательскими ролями, оно может увеличиться в будущем, и для каждой пользовательской роли у меня будет другое представление панели инструментов.

В настоящее время я обработал этот сценарий путем определения роли пользователя.при входе в систему, а затем изменив представление панели мониторинга в соответствии с этой ролью пользователя (сохраняя маршрут для каждой роли, например, для '/dashboard').

Я сделал это, потому что изменения не были значительными, и мне нужно толькоскрыть какую-то часть одной роли и добавить в другую роль.Теперь, когда сложность возрастает, становится все более и более легко обрабатывать все представления dashbaords в одном файле машинописного текста.

Должен ли я создать разные маршруты для всех ролей или вы предложите какой-либо другой подход для более эффективного управления этим сценарием?

1 Ответ

0 голосов
/ 11 июня 2018

Вы можете использовать динамический загрузчик компонентов .

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);
    }
}

dashboard-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
}
...