在多租户Angular 5应用程序中基于路由动态设置样式表
在多租户Angular 5应用程序中基于路由动态设置样式表
提问于 2018-01-19 05:39:02
我有一个在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最终采取了与最初预期不同的方法。确定客户可能更改的特定样式属性，例如颜色、backgroundColor、字体系列等，并将这些属性放入一个类(ClientStyles)中。然后为每个客户端创建子类...以及一个工厂，用于返回给定客户端ID的正确类。
然后创建了一个客户端样式的自定义指令。它接受一个逗号分隔的样式属性字符串(例如'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
Stack Overflow用户
发布于 2018-01-19 05:44:32
您应该定义一个全局变量来根据活动域确定客户端类型，您可以将其作为服务来执行。剩下的样式可以通过ngIf和ngStyle>轻松地完成
Stack Overflow用户
发布于 2018-01-25 13:35:06
似乎是使用路由器属性的理想用例。你可以这样做：
转到负责呈现所需视图的组件，并执行以下操作-
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48330745
复制相关文章
相似问题
腾讯云开发者
