Intento crear elementos dinámicamente en Angular 4.
TS
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; }Sin embargo, el estilo no se aplica al elemento del archivo SASS. Si agrego el estilo directamente en el archivo JS, funciona:
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';Si creo el elemento directamente en el archivo HTML, obtiene automáticamente un atributo _ngcontent-c1 mientras que el creado en TS pierde este atributo (si lo doy manualmente en Chrome Developer Tools - Panel de elementos, obtiene el estilo de SCSS).
<div class="bookmarks-list"> <a class="bookmark"> I am the bookmark </a> </div>Mi pregunta es, ¿cómo aplicar el estilo de clase .bookmark del archivo SASS al elemento de marcador creado en TS?
No compartió el código completo, pero probablemente sea el problema con el lugar donde crea su elemento, si está dentro de un componente, es posible que no llegue a su css debido a la encapsulación, intente usar algo como a continuación:
@Component({ // ... encapsulation: ViewEncapsulation.None, //<<<<< this one! styles: [ // ... ] }) export class HelloComponent { // ... }Para obtener más información, visite el siguiente enlace: https://angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation