组件角度中加载 styleUrls 的条件答案

【问题标题】：condition for load styleUrls in component angular组件角度中加载 styleUrls 的条件
【发布时间】：2018-09-25 23:06:59
【问题描述】：

我想在 styleUrls 中使用多 CSS

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [condition 'if' for Which load css]
})

我累了

【问题讨论】：

尝试查看stackoverflow.com/questions/42496999/…这个链接

标签： angular

【解决方案1】：

你可以在里面使用三元运算符：

const url1 = './foo.css';
const url2 = './bar.css';

let condition = true

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [condition ? url1 : url2]
})

【讨论】：

请在您的答案中添加描述，而不是仅发布代码

【解决方案2】：

你可以内联写一个三元运算符：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [condition ? 'someFile.css' : 'someOtherFile.css']
})

【讨论】：

条件可以是组件中的布尔@input字段吗？我可以使用组件类的函数而不是 styleUrls 的数组吗？
不，它不能，因为该属性甚至在类存在之前就已经定义了，并且在组件被实例化之前就已经定义了。如果您不想根据组件的状态更改样式，我会根据状态应用不同的类。
实际上我要玩组件类继承并给继承者一个简单的装饰，它只会改变选择器（很难我想知道如果多个组件可以满足它，选择器是如何匹配的，例如x-button vsx-button.red) 和自己的风格url