Angular2 Wie bekomme ich einen Haken auf die Stile mit einem bestimmten Element verbunden

Question

Ich erstelle eine Komponente, die meine Newsticker-Richtlinie verbessert, die Sie here sehen können. Statt eine begrenzte Anzahl von Stilattributen der Richtlinie wie folgt übergeben:

<div class="tickerContainer myStyles"> 
    <div ticker [trigger]="'onClick'" [text]="myText" [speed]="15" [padding-right]="0" [size]="40"></div> 
</div> 

würde ich stattdessen lieber das Element an der Seite der CSS der Komponente Stil, in dem sie verwendet wird. Grundsätzlich Stil es genau wie würden Sie ein anderes Element in der Anwendung:

Beispiel:

@Component({ 
    selector: 'my-component', 
    template: ` 
    <div class="my-component-class"> 
     <ticker-container> 
     <ticker>{{displayText}}</ticker> 
     </ticker-container> 
    </div> 
    `, 
    styles: [` 
    .my-component-class{ 
     width: 100%; 
    } 
    ticker-container{ 
     width: 50%; 
    } 
    ticker { 
     font-size: 24px; 
     padding: 4px 10px; 
    } 
    `] 
}) 
export class MyComponent { 
    displayText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." 
} 

Das Problem, das ich treffen will, ist, dass ich die Stile der ursprünglichen <ticker> Komponente über <ng-content> anzeigen kann, aber ich kann nicht Wenden Sie die Stile auf das generierte Element an (das doppelte Element, das generiert wird, um hinter dem ersten Element zu "ankreuzen"). Ich habe es über einen Komponenten-Generator versucht und verschiedene Konfigurationsbefehle der :host/::shadow/>>> Stil Befehle verwendet.

Ich könnte das lösen, wenn ich wüsste, wie man alle Stile von dem anderen Element kopiert. Gibt es einen Weg, das zu tun?

Answer 1

Auf den ticker-container und ticker Komponenten, stellen die ViewEncapsulation-none:

import { ViewEncapsulation } from '@angular/core'; 

@Component({ 
    selector: ticker-counter, 
    ... 
    encapsulation: ViewEncapsulation.None 
}) 

Diese Angular sagen nicht, diese Elemente im Schatten DOM kapseln so Eltern Stile es rieseln kann.