Question

问题：在angular2中，note.component.css文件不适用于note.component.ts中动态创建的元素。有谁知道原因？或者这是正确的行为吗？

note.component.css可以用于note.component.html中已存在的元素。如果我将css样式放在文件＆＃34; styles.css＆＃34;中，它就可以了。如果我用DOM设置样式，它就可以了。

文件结构：

app
    components
        note
            note.component.css
            note.component.html
            note.component.ts
index.html
styles.css

note.component.html：

<div id="section1"></div>

note.component.css：

button{
    background-color: green; //doesn't work
}

styles.css的：

button{
    background-color: green; //worked
}

note.component.ts：

  ngOnInit() {
    var div = document.createElement("button"); 
    div.innerHTML = "Hello world";
    // div.style.backgroundColor = "green"; --- worked
    document.getElementById("section1").appendChild(div);
  }

Answer 1

这与组件的ViewEncapsulation有关。默认情况下，它设置为Emulated，它将所有组件的视图包装到一个单独的范围内。有两种方法可以解决它：

1）将封装设置为ViewEncapsulation.None

import { ViewEncapsulation } from '@angular/core';

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

2）使用:host /deep/

为您的CSS添加前缀

:host /deep/ button {
    background-color: green;
}

*编辑，是的，威廉B说你不应该像这样操纵DOM。看看#2 here

angular2 css样式不适用于动态创建的元素吗？

1 个答案: