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

Question

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

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

使用DOM或jQuery可以实现此目的，但我想使用Angular 2来完成。

是否有可能？

谢谢

- Steffi

---

请查看NgClass https://angular.io/api/common/NgClass - Yakov Fain

@YakovFain 在我的情况下，我无法访问body。因此，我无法向其添加ng-class属性。 - Steffi

Answer 1

您可以像这样动态创建<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);
}

- ebrehault

Answer 2

我不确定你能否对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并传递一个颜色变量，比如'red'、'green'或'white'，根组件的背景会相应地改变。

- Vamshi

---

能否举个例子？ - Steffi

将创建一个 Plunker。 - Vamshi

Answer 3

将所有HTML代码放在自定义指令中 - 我们称其为 ngstyle...

使用指令标记将您的ngstyle添加到页面中，例如：

在我们的情况下：

<ngstyle><ngstyle>

但是让我们也使用ng-if将逻辑附加到您的指令上，这样您就可以切换它的开关...

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

现在，如果您的“isModalOpened”在控制器中设置为作用域，如下所示：

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

...你可以以许多不同的方式切换它的真或假，这应该可以切换你的指令开启或关闭。

- altShiftDev