angular2：如何通過條件手動添加css文件到index.html？

Question

下面的代碼是爲style定義的。

<!-- for mobile --> 
<link rel="stylesheet" href="/dist/css/mobile.css"> 

<!-- for desktop -->  
<link rel="stylesheet" href="/dist/css/desktop.css"> 

我想在 'SRC/index.html的' 通過以上條件的文件添加到<頭>。

如何爲每個設備應用css文件？

如您所知，我無法在'index.html'中使用'條件'代碼。

請注意，我不會使用下面的方法。

// in angular-cli.json 
"apps": [ 
    { 
     "root": "src", 
     "index": "index.html", 
     "styles": [ 
      "/dist/css/mobile.css", 
      "/dist/css/desktop.css" 
     ] 
    } 
] 


// in component.ts 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrl: '/dist/css/mobile.css' 
}) 

我期待您的建議。

謝謝。

Answer 1

動態地加載或者改變你的CSS，你可以做到以下幾點：

1. index.html中：

   你將有一個樣式錶鏈接如下：

   <link id="theme" href="assets/light.css" rel="stylesheet" >

   請注意鏈接元素有「id」。

2. 在你的組件，你將有如下：

   導入從平臺瀏覽器的文檔

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

   然後，在你的行動或初始化你將相應地改變你的CSS：

   this.document.getElementById('theme').setAttribute('href','assets/dark.css');

默認情況下，您將加載一個CSS文件。讓我們說desktop.css。在應用程序的根組件中，您可以查找設備或cookie，或設置一些條件以從desktop.css更改爲mobile.css。就像你說的，你不會使用angular-cli.json加載你的CSS。