Angular Tags stören CSS Stylings

-1

Ich habe ein Projekt mit dem Angular 2-Framework gebaut. Die kundenspezifischen winkelförmigen Tags (<my-app>, <my-whatever-component> usw.) unterbrechen weiterhin den css-Ausgang. Wenn der HTML-Code direkt auf der Datei index.html steht (nicht in irgendeiner Komponente), wird das CSS korrekt geladen.Angular Tags stören CSS Stylings

Ich habe debugged und bin zu dem sicheren Schluss gekommen, dass die benutzerdefinierten eckigen Tags die Ursache des Problems sind.

Was kann ich tun, um dieses Verhalten zu ändern? Wie kann ich die benutzerdefinierten HTML-Tags verschwinden lassen, nachdem die Ansicht gerendert wurde? Dies verhindert, dass hierarchische CSS-Regeln brechen.

Edit 1: Ich habe vergessen zu erwähnen, dass das CSS ist benutzerdefiniert (Free Bootstrap Admin Template Thingy), so kann ich nicht (mehr wie ich will nicht) zwicken es.

Quelle

2016-11-10 omo_prodigi

Schauen Sie sich das DOM an. Schreibe das passende CSS. – Quentin

@Quentin Siehe bearbeiten –

Sie können das CSS ändern, ohne das Original zu ändern, erstellen Sie einfach die CSS-Datei für Ihre Komponente und überschreiben die Stile, jede Komponente CSS-Datei wird nicht seine Stile zu anderen Komponenten, es wird nur in der Komponente verwendet. –

Sie benötigen Ansicht Kapselungstypen zu setzen, Weitere Informationen here

@Component({ 
    moduleId: module.id, 
    selector: 'my-zippy', 
    templateUrl: 'my-zippy.component.html', 
    styles: [` 
    .zippy { 
     background: green; 
    } 
    `], 
    encapsulation: ViewEncapsulation.None //No Shadow DOM at all. Therefore, also no style encapsulation. 
})

EDIT

Als Abhilfe können Sie ein Attribut Selektor in Ihrer Komponente wie

selector: '[my-component]'

verwenden können, und dann verwende es wie

<div my-component>Hello My component</div>

Auf diese Weise können Sie Komponententags aus Ihrem HTML-Code überspringen und hierarchische CSS anwenden.

Quelle

2016-11-10 10:33:30 Satendra

Danke für die Antwort. View Encapsulation hat damit zu tun, dass Stilregeln nur für eine Komponente beibehalten werden. Was ich wirklich will ist, dass das benutzerdefinierte Tag "< my-zippy >" verschwindet, sobald die Ansicht gerendert wurde. Dies verhindert, dass hierarchische CSS-Regeln brechen. –

@omo_prodigi Überprüfen Sie meine EDIT-Sektion, kann dies helfen. – Satendra

Können Sie ein Beispiel durch Plunker oder ähnliches geben? Verwenden Sie die twitter bootstrap bootstrap.js oder die UI Bootstrap? Wenn Sie nur den direkten Twitter-Bootstrap verwenden, haben Sie Probleme mit den Bootstrap-Komponenten, die in Javascript implementiert sind.

Hoffe, dass hilft

Quelle

2016-11-10 10:36:59 user3244591

Angular Tags stören CSS Stylings

Antwort

Verwandte Themen