Angular2 - 如何有條件地加載index.html中的css文件？

我現在所擁有的是黑暗的主題頁面index.html中：Angular2 - 如何有條件地加載index.html中的css文件？

<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>

我也有，是落實需要一個明亮的「light_room.css」的主題，用戶可以切換上需要的主題基地。我想知道我怎麼能做到這一點？

我認爲這可以通過使用url參數來完成，以便當用戶在url的末尾輸入類似?light_room=True時，頁面將加載light_room.css。不過，我認爲它只能在普通模板中完成，而不能在index.html中完成。

有沒有人在index.html中有條件加載css文件有類似的經驗？

來源

2017-05-30 Austin Chen

您是否試過這種方法？讓您的後端根據URL參數生成不同的index.html。 – Niklas

@Niklas我認爲這可能是一種方法，但我不知道如何。因爲設置URL參數通常在.ts文件中完成，但index.html沒有。 –

重點是，主題通常只是一些不同的顏色。您可以將所有主題添加到一個CSS。 my-app > .dark獲取不同的顏色，並且該類將在代碼中動態添加。

這裏有一個更詳細的例子，我如何使用它：

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>

非角度版

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); 
    } 
}

來源

2017-05-30 13:25:35 iRaS

謝謝回答，但我不允許觸摸css文件，所以....我仍然需要找到一種方法來選擇這兩個文件不知何故 –

這將是類似的問題，因爲標題 - 角2沒有功能在''之外操作。對於標題，他們提供「標題」服務。但不適用於加載CSS。 – iRaS

是的，如果我可以包含功能它可能是可行的。 –

Angular2 - 如何有條件地加載index.html中的css文件？

回答

相關問題