基于多租户Angular 5应用程序中的路由动态设置样式表

时间:2018-01-18 21:39:02

标签: angular

我有一个多租户应用程序,已在Angular 5中重新实现。每个客户端都有颜色和字体首选项。

客户端由路由确定,例如   - www.mydomain.com/client1/salesData   - www.mydomain.com/client2/salesData   - 等等。

我有一个default.css样式表,其样式如下:

.clientBackground { color: white; }

并希望拥有客户端样式表:

client1.css {
.clientBackground { color: blue; }
}

client2.css {
.clientBackground { color: green; }
}

然后,根据传入路径中的客户端使用相应的样式表。

关于如何做到这一点的任何想法?旧系统(Microsoft MVC)使用样式"捆绑"可以选择包含基于客户端。

编辑1/24/18 采取与最初预期不同的方法。确定了客户可能会改变的特定样式属性,例如color,backgroundColor,font-family等,并将它们放在一个类(ClientStyles)中。然后为每个客户端创建子类...以及一个工厂,在给定客户端ID的情况下返回正确的类 然后创建了一个自定义指令[client-styles]。它采用以逗号分隔的样式属性字符串(例如' color,font-family'),在ClientStyles类中查找这些属性并将它们应用于元素。如下:

import { Attribute, Directive, OnInit, AfterViewInit, Inject, HostBinding, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Rx';

    import { ClientStyles } from '../../../models/ClientStyles';
    import * as clientStyleDefs from '../../../models/client/ClientStyleDefs';

    @Directive({
      selector: '[client-styles]'
    })
    export class ClientStylesDirective implements OnInit {

      clientCode: string;
      clientStyles: ClientStyles = new ClientStyles();
      inputStyles: string[];
      sInputStyles: string;
      element: ElementRef;

      // client-styles takes a comma-delimited list of style attributes
      // to be set with client values 
      // (or defaults if client value for the attribute is not specified) 
      constructor(
        el: ElementRef, @Attribute("client-styles") styleString: string,
        @Inject(StateProvider) private _state: Observable<State>) { 
          this.element = el;
          this.inputStyles = styleString.split(',');
          this.sInputStyles = styleString;
        }

      ngOnInit() {
        this._state.subscribe(x => {
          this.clientCode = x.criteria.clientCode;      
        });

        this.clientStyles = clientStyleDefs.getClientStyles(this.clientCode);
        this.setStyles();
      }

      setStyles() {
        for (let prop in this.clientStyles) {
          // If property is in string, update that property in the element style
          if (this.sInputStyles.indexOf(prop) >= 0 && this.clientStyles[prop] != null) {
            // Heading and text font families - set the fontFamily
            if (prop == "headingFontFamily" || prop == "textFontFamily") {
              this.element.nativeElement.style["fontFamily"] = this.clientStyles[prop];
            }
            else {
              this.element.nativeElement.style[prop] = this.clientStyles[prop];
            }
          }
        }
      }
    }

2 个答案:

答案 0 :(得分:0)

您应该定义一个全局变量,根据活动域确定客户端类型,您可以将其作为服务来执行。 其余的造型可以通过ngIf然后ngStyle&gt;轻松完成。

答案 1 :(得分:0)

似乎是使用路由器属性的理想用例。这就是你如何做到的:

转到负责呈现所需视图的组件并执行此操作 -

color: string;
constructor(private router: Router) {
    this.setUpEvents();
}

private setUpEvents(): void {
    this.router.subscribe((value: any) => this.onNext(value)); //as router returns an observable so you need to subscribe
}

private onNext(value: any): void {
    console.log(value); //this will give you the path which has been activated and based on this you can initialize your style variable
    this.color = 'green'; //just for the sake of understanding. change it according to your need. And you can have many other css properties set here
}

现在在你的视图中使用NgStyle,如下所示:

<div [ngStyle]="{'color': color}"></div>