Angular2 - Wie laden Sie CSS-Datei in index.html bedingt?

Was ich jetzt habe, ist eine Seite mit dunkelem Thema in index.html:Angular2 - Wie laden Sie CSS-Datei in index.html bedingt?

<base href="/"> 
<html> 
<head> 
    <title>XXX</title> 
</head> 
<body> 
    <link rel="stylesheet" type="text/css" href="assets/dark_room.css"> 
    <my-app>Loading...</my-app> 
</body> 
</html>

ich auch ein helles „light_room.css“ Thema habe, die zur Umsetzung erforderlich ist, und Benutzer könnten Thema Basis auf Bedürfnisse wechseln . Ich frage mich, wie ich das erreichen könnte?

Ich dachte, es könnte getan werden, indem Sie einen URL-Parameter, so dass, wenn Benutzer wie ?light_room=True am Ende der URL, die Seite light_room.css laden. Ich denke jedoch, dass es nur in normalen Vorlagen, aber nicht in index.html gemacht werden kann.

Hat jemand ähnliche Erfahrung in cd-Datei in index.html bedingungsabhängig laden?

Quelle

2017-05-30 Austin Chen

Haben Sie es auf diese Weise versucht? Lassen Sie Ihr Backend abhängig von den URL-Parametern unterschiedliche index.html generieren. – Niklas

@ Niklas Ich denke, es könnte eine Annäherung sein, aber ich weiß nicht wie. da das Einrichten von URL-Parametern normalerweise in der .ts-Datei erfolgt, hat index.html jedoch keine. –

Der Punkt ist, dass Thema ist in der Regel nur einige verschiedene Farben. Sie können alle Themen zu einer CSS hinzufügen. my-app > .dark erhält verschiedene Farben und die Klasse wird dynamisch im Code hinzugefügt. Hier

ist ein detaillierteres Beispiel, wie ich es verwenden:

app-theme.scss:

@import '[email protected]/material/theming'; 

@include mat-core(); 
$words-app-primary: mat-palette($mat-teal, 300); 
$words-app-secondary: mat-palette($mat-indigo, 500); 
$words-app-warn: mat-palette($mat-red, 500); 

$words-app-theme: mat-light-theme($words-app-primary, $words-app-secondary, $words-app-warn); 
@include angular-material-theme($words-app-theme); 

app-words-root > md-sidenav-container.dark { 
    $words-app-theme-dark: mat-dark-theme($words-app-primary, $words-app-secondary, $words-app-warn); 
    @include angular-material-theme($words-app-theme-dark); 
}

app.component.html:

<md-sidenav-container [class.dark]="useDarkTheme"> ... </md-sidenav-container>

nicht Winkelversion

app.component.js

import { DOCUMENT } from '@angular/platform-browser'; 

class AppComponent { 
    constructor(@Inject(DOCUMENT) document: any) { 
    let head = document.getElementsByTagName('head')[0]; 
    let link = document.createElement('link'); 
    link.rel = 'stylesheet'; 
    link.type = 'text/css'; 
    link.href = 'assets/dark_room.css'; // you may want to get this from local storage or location 
    head.appendChild(link); 
    } 
}

Quelle

2017-05-30 13:25:35 iRaS

danke für die Antwort, aber ich darf nicht die CSS-Dateien zu berühren, so .... Ich muss immer noch eine Möglichkeit finden, diese beiden Dateien irgendwie zu wählen –

Dies wird ein ähnliches Problem sein wie für den Titel - angular 2 hat keine Funktionen für dom Manipulation außerhalb von ''. Für Titel bieten sie einen 'Title' Service an. Aber nicht zum Laden von CSS. – iRaS

Ja, wenn ich Funktion hinzufügen kann, könnte es machbar sein. –

Angular2 - Wie laden Sie CSS-Datei in index.html bedingt?

Antwort

Verwandte Themen