angular2中的条件css页面答案

【问题标题】：Conditional css page in angular2angular2中的条件css页面
【发布时间】：2018-01-07 20:26:31
【问题描述】：

在创建角度组件时，如何使css文件有条件。即，例如，如果我在 user.type = 'A' 时想要 style1.css，而在 user.type ='B' 时想要 style2.css。这可能吗？

【问题讨论】：

stackoverflow.com/questions/19375695/…
@AdityaMukherji 是关于 angularjs，与 angular2 无关。

标签： angular angular2-template angular2-components

【解决方案1】：

你可以用这样的代码来做到这一点：

主index.html

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

那么你的组件代码应该是这样的

@Component({
   ........
})
export class MyComponent {
    constructor (@Inject(DOCUMENT) private document) { }

    switchTheme() {
      this.document.getElementById('theme').setAttribute('href', 'secondsheet.css');
    }
}

【讨论】：

这会影响整个 DOM 吗？还是只是组件的样式？我在看类似的东西。 @Component({ selector: 'app-items-list', templateUrl: './items-list.component.html', styleUrls: [ if (something) :'./items-list.component.css'?'./items-list.component2.css' ] })
不，此解决方案仅适用于整个 DOM。由于视图封装在组件级别的工作方式，CSS 类被任意重命名（以启用封装），因此无法以编程方式替换它们