Angular 4 CSS auf document.createElement()

Question

Ich versuche Elemente in 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; 
} 

jedoch der Stil auf die Anwendung nicht dynamisch zu erstellen Element aus der SASS-Datei. Wenn ich den Stil direkt in der JS-Datei hinzufügen, funktioniert es:

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'; 

Wenn ich das Element direkt in der HTML-Datei zu erstellen, automatisch wird es ein _ngcontent-c1 Attribut, während diejenige in TS erstellt vermisst diese Attribut (wenn ich es manuell in Chrome Developer Tools - Element-Panel gebe, erhält es den Stil von SCSS).

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

Meine Frage ist, wie der .bookmark Klasse Stil aus der SASS auf das erstellte Lesezeichen Element in TS-Datei anzuwenden?

Answer 1

Sie, nicht den vollständigen Code teilen, aber es ist wahrscheinlich das Problem mit dem Sie Ihr Element erstellen, wenn es sich in einer Komponente ist, es könnte Ihre CSS aufgrund Kapselung nicht erreichen, versuchen Sie so etwas wie unten zu verwenden:

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

Für weitere Informationen, besuchen Sie folgenden Link: https://angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation