我有一个多租户应用程序,已在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];
}
}
}
}
}
答案 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>