nas*_*ngW 5 css external angular-cli angular
下面的代码是为样式定义的.
<!-- for mobile -->
<link rel="stylesheet" href="/dist/css/mobile.css">
<!-- for desktop -->
<link rel="stylesheet" href="/dist/css/desktop.css">
我想按条件将上面的文件添加到'src/index.html'中的<head>.
如何为每个设备应用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'
})
我期待着你的建议.
谢谢.
Abd*_*oof 14
要动态加载或更改CSS,您可以执行以下操作:
在index.html中:
您将拥有如下的样式表链接:
<link id="theme" href="assets/light.css" rel="stylesheet" >
请注意,链接元素有"id".
在您的组件中,您将具有以下内容:
从平台浏览器导入DOCUMENT
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.
| 归档时间： |
|
| 查看次数： |
7496 次 |
| 最近记录： |