document.createElement() 上的 Angular 4 CSS

Question

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

TS

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

社会保障局

.bookmark {
  display: block;
  background: white;
  color: #999;
  padding: 20px;
  transition: 0.3s ease all;
  border-bottom: 1px solid #DDD;
}

但是，该样式不适用于 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 开发者工具 - 元素面板中手动提供它，它会从 SCSS 获取样式）。

<div class="bookmarks-list">
  <a class="bookmark">
    I am the bookmark
  </a>
</div>

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

Answer 1

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

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

有关更多信息，请访问以下链接：https : //angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation