在Angular2中的条件CSS页面

15 浏览
0 Comments

在Angular2中的条件CSS页面

在创建一个angular组件时，如何使css文件具有条件性。比如说，如果我想在user.type='A'时使用style1.css，而在user.type='B'时使用style2.css。这种情况是否可行？

0

1 答案

0 Comments

在Angular2中，如果想要根据条件动态加载CSS样式表，可以使用如下的代码方法：

首先，在index.html文件中添加以下代码：

<head>
   <link id="theme" rel="stylesheet" href="firstsheet.css">
</head>

然后，在组件中的代码如下：

({
   ........
})
export class MyComponent {
    constructor ((DOCUMENT) private document) { }
    switchTheme() {
      this.document.getElementById('theme').setAttribute('href', 'secondsheet.css');
    }
}

这个方法是否会影响整个DOM？还是只会影响组件的样式？我曾尝试过类似以下的方法，但是没有成功：

({ selector: 'app-items-list', templateUrl: './items-list.component.html', styleUrls: [ if (something) :'./items-list.component.css'?'./items-list.component2.css' ] })

不，这个解决方案只会影响整个DOM。由于视图封装在组件级别进行，CSS类会被任意地重命名（以实现封装），所以无法通过编程的方式进行替换。

0