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

Question

我現在擁有的是index.html中帶有深色主題的頁面：

<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文件？

Answer 1

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

以下是我如何使用它的更詳細示例：

APP-theme.scss：

@import '~@angular/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);
  }
}

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

問題描述

1 個解決方案

解決方案1
2 2017-05-30 13:25:35

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

問題描述

1 個解決方案

解決方案1 2 2017-05-30 13:25:35

解決方案1
2 2017-05-30 13:25:35