如何在 Angular 2 中动态添加样式表？答案

【问题标题】：How to add stylesheet dynamically in Angular 2?如何在 Angular 2 中动态添加样式表？
【发布时间】：2017-11-16 15:05:39
【问题描述】：

有没有办法在 Angular2 中动态添加样式表 url 或 <style></style> ？

例如，如果我的变量是 isModalOpened 是 true，我想在我的根组件之外的几个元素中添加一些 CSS。喜欢body 或html。

使用 DOM 或 jQuery 可以做到这一点，但我想用 Angular 2 做到这一点。

可能吗？

谢谢

【问题讨论】：

看看NgClass angular.io/api/common/NgClass
@YakovFain 在我的情况下，我无法访问身体。所以我不能给它添加 ng-class 属性。

标签： javascript html css angular angular2-template

【解决方案1】：

我不确定您是否可以对 body 或 html 执行此操作，但您可以对根组件执行此操作。

创建注入根组件的服务
让服务有状态（可能是BehaviorSubject）
访问该服务并在 isModalOpened 更改时更改状态
在根组件中，您将看到并更改组件参数值
在根组件 html 中，您可以根据组件参数值更改类值

更新：从内部组件设置背景颜色。

app.component.css

.red{
    background: red;
 }

.white{
    background: white;
 }
.green{
    background: green;
 }

app.component.html

<div  [ngClass]="backgroundColor" ></div>

app.component.ts

constructor(private statusService: StatusService) {
    this.subscription = this.statusService.getColor()
    .subscribe(color => { this.backgroundColor = color; });
}

status.service.ts

private color = new Subject<any>();
public setColor(newColor){
    this.color.next(newColor);
}
public getColor(){
    return this.color.asObservable();
}

child.component.ts

export class ChildComponent {
    constructor(private statusService: StatusService) {}

    setColor(color:string){
      this.statusService.setColor(color);
    }
}

因此，每当我们调用 setColor 并传递一个颜色变量，例如“红色”、“绿色”或“白色”，根组件的背景就会相应地发生变化。

【讨论】：

你能举个例子吗？
将创建一个 plnkr

【解决方案2】：

将你所有的 html 代码放在一个自定义指令中 - 我们称之为 ngstyle...

在我们的例子中，使用指令标签将您的 ngstyle 添加到您的页面：

<ngstyle><ngstyle>

但我们也可以使用 ng-if 将逻辑附加到您的指令中，以便您可以打开或关闭它...

<ngstyle ng-if="!isModalOpened"><ngstyle>

现在，如果您的 'isModalOpened' 设置为控制器中的范围，如下所示：

$scope.isModalOpened = false; //or true, depends on what you need

...您可以通过多种不同方式将其切换为真或假，这些方式应该可以打开和关闭您的指令。

【讨论】：

【解决方案3】：

您可以像这样动态创建<style> 标签：

ngOnInit() {
  const css = 'a {color: pink;}';
  const head = document.getElementsByTagName('head')[0];
  const style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));
  head.appendChild(style);
}

【讨论】：