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。