角4 CSS上使用document.createElement（）

问题描述：

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

动态创建元素SCSS

.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文件中创建的元素，它同时在TS创建一个错过这个自动获得一个_ngcontent-C1属性属性（如果我在Chrome开发人员工具 - 元素面板中手动输入它，它会从SCSS获取样式）。

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

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

，你为什么和角度做标准的DOM呢？ –

你有文件模板吗？ –

@TatsuyukiIshi谢谢你的提问。我是Angular4的新手，我尝试为_click_事件的组件视图创建元素。你建议用什么方式代替_document.createElement（）_？ –

答

您不同意的全部代码，但可能它与在那里你创建你的元素，如果它是一个组件内的问题，它可能不是由于封装达到你的CSS，尽量使用类似如下：

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

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

是的，它是在一个组件里面，改变封装模式确实有帮助。非常感谢！ –

角4 CSS上使用document.createElement（）

相关推荐