Question

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

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

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

可能吗？

由于

Answer 1

您可以动态创建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); }代码：

print s['type']['login']

Answer 2

我不确定你能对body或html做什么，但是你可以用root组件来做。

创建注入根组件的服务
让服务具有状态（可能是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并传递一个颜色变量，例如＆＃39; red＆＃39;，＆＃39; green＆＃39;或者＆＃39;白色＆＃39;根组件的背景相应地改变。

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

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

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

3 个答案: