Dynamische styleUrls im Winkel 2?

Ist es möglich, dynamisch zu injizieren urls zu stylesheets in eine Komponente?

Etwas wie:

styleUrls: [
  'stylesheet1.css',
  this.additionalUrls
]

oder (Wunschdenken und beachten Sie, dass dies nur fake-code):

export class MyComponent implements dynamicUrls {

  ngDynamicUrls() {
    this.inject(['anotherStylesheet.css', 'anotherStylesheet2.css']);
  }
}

Weil wenn du wirst in der Lage sein zu überschreiben, bestimmte Arten von stylesheet1 ohne Zugriff auf es, wie soll man das tun? Meine einzige Idee ist, dynamische styleUrls irgendwie, aber ich glaube nicht, dass dies überhaupt möglich ist von dem, was ich finden konnte.

Irgendwelche Ideen?

InformationsquelleAutor Chrillewoodz | 2016-04-10
  1. 8

    Es ist möglich, in manchen vielleicht hack Weg hat es bei mir geklappt. Sie können manipulieren Eckig 2-Komponenten-Dekorator erstellen Sie Ihre eigenen und die Rückkehr Eckige Symbol mit Ihren Eigenschaften.

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

    export interface IComponent {
      selector: string;
      template?: string;
      templateUrl?: string;
      styles?: string[];
      styleUrls?: string[];
      directives?: any;
      providers?: any;
      encapsulation?: number;
    }

    export function CustomComponent( properties: IComponent): Function {
      let aditionalStyles: string;

      try {
          aditionalStyles =  require(`path to aditional styles/${ properties.selector }/style/${        properties.selector }.${ GAME }.scss`);
          properties.styles.push(aditionalStyles);
        } catch (err) {
          console.warn(err)
        }
      }

      return Component( properties );
    }

    Und in Ihrer Komponente ersetzen der Standard Winkel-2 @ - Komponente durch eine neue.

    import { CustomComponent } from 'path to CustomComponent';

@CustomComponent({
  selector: 'home',
  templateUrl: './template/home.template.html',
  styleUrls: [ './style/home.style.scss']
})
export class ......
    • Haben Sie diese getestet?
    • Ja, das funktioniert gut für mich. Ich bin mit der webpack-und Winkel-2.0.0
    • Ok, cool. Werde es testen später.
    • Also @Chrillewoodz hast du es auch probieren? Denken mit dieser Implementierung aber vielleicht nur eine neue Komponente erstellen, die für jeden Stil und Referenz die gleichen templateUrl und importieren Sie das Skript von einer 3. Modul...
    • ja, aber Sie müssen noch um eine Komponente zu erstellen pre-Stil, der verwendet werden muss, es ist nicht eine Komponente, erhält einen style-Namen aus der server zum Beispiel, nicht wirklich dynamisch
    • Sie stellen dort eine extra Halterung und SPIEL var, die nicht deklariert ist !

    InformationsquelleAutor Virge
  2. 3

    Habe ich eine Lösung gefunden:

    1. Habe ich das geändert styleurls Formatvorlagen in der Komponenten-Dekorator.

    2. Ich Kriege meine variable.

    3. Ich werde den benötigen Befehl in meinem Lackierer.

    import { Component } from '@angular/core';
import { environment } from '../environments/environment';
let lang = environment['lang'];

@Component({
   selector: 'app',
   templateUrl: './app.component.html',
   styles: [require('./app.component.css'), require('./app.component.' + lang + '.css')]
  })

  export class AppComponent {

   constructor() { }

  }

    In diesem einfachen Beispiel habe ich importiert die environment-variable geändert und die css-string dynamisch.

    • Dies ist meine erste Antwort ist stackoverflow. Ich verstehe nicht, warum die Antwort ist nicht gut. Können Sie bitte erklären? @Jean-FrançoisCorbett
    • Ich entschuldige mich! Kommentar & flag gemeint waren, für eine andere Antwort, und ich anscheinend irgendwie legen Sie Sie hier. Bitte ignorieren! Deine Antwort ist Prima! Ich bin mir nicht sicher, wo ich war auf der Suche. Entschuldigungen wieder.
    InformationsquelleAutor noah lubko
  3. 1

    Ich das gleiche müssen dynamisch injizieren urls zu stylesheets und schließlich zum initialisieren einer Komponente für jede variable css (in meinem Fall 3 verschiedene Stile) mit den leeren Vorlage und verwenden Sie diese in mein app-Komponente mit ngIf Zustand.

    Durch die Verwendung der Eigenschaft "Kapselung: ViewEncapsulation.None", der Stil der ausgewählten Komponente wird dann Hinzugefügt, um den header der Seite und ermöglichen, um die richtigen renderer für die ganze Seite.

    • Das problem bei diesem Ansatz ist, dass die Stile, die Winkel addiert, um den Kopf, werden nicht automatisch entfernt, wenn die Komponente zerstört wird.
    InformationsquelleAutor PetitMel_issa
  4. 0

    Ich glaube nicht, können Sie dynamische stylesheet-URLs, weil Sie keinen Zugang zu Ihrer Klasse, Eigenschaft oder Methode in @Component Dekorateur.

    Aber können Sie Ihr Ziel erreichen, indem er dynamische style-Klassen, die in Ihrer Vorlage.

    • Wie hier erläutert, stackoverflow.com/a/36516274/217408
    • Problem ist, dass ich keinen Zugriff auf die templates nur auf die Bauteile selbst.
    • Auch, wenn Sie keinen Zugriff auf die Vorlage & immer noch möchten, haben verschiedene Stile, warum nicht in Erwägung ziehen, verschiedene Komponenten mit der gleichen Vorlage (mit verschiedenen style sheets) & laden der Komponenten dynamisch.
    • Das wäre eine option, aber es immer noch nicht bieten volle persönliche anpassen. Scheint wie eine funktionale Loch, das Sie wirklich brauchen, um die Adresse..
    • Dynamische style-Klassen bedeutet css-overhead statt Vorteil von sass-Variablen. Für jede neue Haut, Sie wird die Wiederholung der gesamten stylesheet.
    InformationsquelleAutor siva636
  5. -2

    Benutzte ich die stylesheet-Verknüpfung in der html-Vorlage mit ngIf Zustand, es funktionierte für mich.

    <link rel='stylesheet' href="/stylesheets/classicTheme.css" *ngIf="theme === 'classic' " />
<link rel='stylesheet' href="/stylesheets/styleTheme.css" *ngIf="theme === 'style' " />
    • Einfach nur neugierig, wie kann das eigentlich funktionieren? bei Winkel 2, der "app" wird innerhalb des root - element (in der Regel lebt unter <body>). Also, wie können Sie Ihren code binden Sie an die theme variable?
    • nicht überschreiben die Stile für Komponenten
    • Ich kann nicht einmal... wie sollte das auch funktionieren ?
    • Nicht sagen, es wird oder wird nicht funktionieren, aber während jeder denkt, dass seine arbeiten nicht, weil, wo die app läuft, kann die app den Titel der Seite ändern, richtig? Es muss etwas Zugriff auf die <head> Abschnitt.
    InformationsquelleAutor vierc
Schreibe einen Kommentar