angular2：如何通过条件手动将css文件添加到index.html？

发布时间：2020-12-17 06:54:54 所属栏目：安全来源：网络整理

导读：下面的代码是为样式定义的. !-- for mobile --link rel="stylesheet" href="/dist/css/mobile.css"!-- for desktop -- link rel="stylesheet" href="/dist/css/desktop.css" 我想将上面的文件添加到 head在’src / index.html’中的条件. 如何为每个设备应用

下面的代码是为样式定义的.

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

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

我想将上面的文件添加到< head>在’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'
})

我期待着你的建议.

谢谢.

解决方法

要动态加载或更改CSS,您可以执行以下操作：

>在index.html中：

您将拥有如下的样式表链接：

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

请注意,链接元素有“id”.
>在您的组件中,您将具有以下内容：

从平台浏览器导入DOCUMENT

从@ @ angular / platform-b??rowser导入{DOCUMENT};

然后,在你的行动或初始你将相应地改变你的CSS：

this.document.getElementById( ‘主题’)的setAttribute( ‘href’ 属性,‘资产/ dark.css’);

默认情况下,您将加载一个CSS文件..让我们说desktop.css.在应用程序的根组件中,您可以查找设备或cookie,或设置一些条件以从desktop.css更改为mobile.css.就像你说的那样,你不会使用angular-cli.json加载你的CSS.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!