document.createElement（）上的Angular 4 CSS

我尝试在Angular 4中动态创建元素

TS

SCSS

但是，该样式不会应用于SASS文件中的元素。如果我直接在JS文件中添加样式，它可以工作：

const bookmark = document.createElement('a');
bookmark.className = 'bookmark';

bookmark.style.display = 'block';
bookmark.style.background = 'white';
bookmark.style.color = '#999';
bookmark.style.padding = '20px';
bookmark.style.transition = '0.3s ease all';
bookmark.style.borderBottom = '1px solid #DDD';

如果我直接在HTML文件中创建元素，它会自动获得一个\ngcontent-c1属性，而在TS中创建的元素会忽略此属性（如果我在Chrome Developer Tools-element面板中手动提供，它会从SCSS中获取样式）

我是书签

---

我的问题是，如何将SASS文件中的.bookmark类样式应用于TS中创建的bookmark元素？

您没有共享完整的代码，但可能是您创建元素的位置有问题，如果它位于组件内部，则可能由于封装而无法到达css，请尝试使用以下方法：

@Component({
// ...
encapsulation: ViewEncapsulation.None, //<<<<< this one!
styles: [
  // ...
]
})
export class HelloComponent {
// ...
}

@组件({
// ...
封装：ViewEncapsulation.None，//您没有共享完整的代码，但可能是创建元素的位置有问题，如果元素位于组件内部，则可能由于封装而无法到达css，请尝试使用以下方法：

@Component({
// ...
encapsulation: ViewEncapsulation.None, //<<<<< this one!
styles: [
  // ...
]
})
export class HelloComponent {
// ...
}

@组件({
// ...
封装：ViewEncapsulation.None，//你为什么要用Angular做经典DOM？你有文档模板吗？@TatsuyukiIshi谢谢你的问题。我是Angular4的新手，我尝试在单击事件时为组件视图创建元素。你建议用什么方法代替document.createElement（）？你为什么要用Angular做经典DOM？你有文档模板吗？@TatsuyukiIshi谢谢你的问题。我是Angular4的新手，我尝试在单击事件时为组件视图创建元素。你建议用什么方法代替document.createElement（）？是的，它位于组件内部，更改封装模式非常有帮助。非常感谢！是的，它位于组件内部，更改封装模式非常有帮助。非常感谢！
<div class="bookmarks-list">
  <a class="bookmark">
    I am the bookmark
  </a>
</div>

@Component({
// ...
encapsulation: ViewEncapsulation.None, //<<<<< this one!
styles: [
  // ...
]
})
export class HelloComponent {
// ...
}