2017-04-13 3 views
1

arbeiten habe ich eine angular2 Komponente:angular2 Komponente styleUrls nicht korrekt

@Component({ 
    providers: [ 
     FlowsheetService, 
     SubscriptionService 
    ], 
    moduleId: module.id, 
    selector: 'flowsheet', 
    templateUrl: './flowsheet.component.html', 
    styleUrls: ['./lastRow.css'] 
}) 

lastRow.css im selben Verzeichnis wie die Komponentendatei enthält:

.yellow { 
    background-color: yellow; 
} 

in meiner dritten Partei Kontrolle dort ein ist API, die einen CSS-Klassennamen als Rückgabewert benötigt.

diese Funktion ist wie folgt:

function className() { 
    return 'yellow'; 
} 

ich nirgendwo sehe in gelb in meinem 3rd-Party-Steuerung zeigt, auf.

Codiere ich das im Allgemeinen richtig?

+0

Für mich zumindest, ist es nicht klar, was ist die Struktur des Programms, was bedeutet die Kontrolle von Dritten und api und wo der className() verwendet für und für was. Kannst du einen JFiddle/Plunker/Codepen setzen? – elpddev

+0

Ich verwende ein Open-Source-Grid-Steuerelement. Ich kontrolliere/konfiguriere es mithilfe seiner eigenen API. Eine der API-Funktionen zum Anpassen einer Zeilenfarbe muss einen Klassennamen erhalten. Es ist ein CSS-Klassenname. Ich hoffe das hilft. Plunker ist nicht geeignet, da die Grid-Quelle usw. benötigt wird. – reza

+0

Sie können in den Browser-Entwicklungstools nachsehen, ob die CSS-Dateien wirklich nicht geladen sind. Wenn dies der Fall ist, können Sie mit dem Elementinspektor überprüfen, welche Klasse in den Zeilen der benutzerdefinierten Rasterkomponente eingefügt wird und ob sie zu der Klasse passt, die Sie erwarten. Die Antwort auf diese Fragen könnte helfen zu verstehen, was vor sich geht. – elpddev

Antwort

2

Diese Syntax:

styleUrls: ['./lastRow.css'] 

Definiert einen Stil nur für die Vorlage mit dieser Komponente verknüpft ist. Ist die Funktion, die Sie in der Komponente definiert haben? Wenn nicht, kann der Stil nicht auf diese Weise definiert werden. Sie müssen stattdessen den Stil für die App definieren.

Die Angular Dokumentation hier: https://angular.io/docs/ts/latest/guide/component-styles.html geht durch, wie man Stile für die Anwendung stattdessen definiert.

+0

Die Funktion, die ich in der Komponentenklasse ja definiert habe, wird aber an das Third-Party-Control übergeben, das als Eingabeparameter verwendet werden soll. Also sollte es funktionieren. Nein? – reza

Verwandte Themen