如何在Angular 2中以编程方式为组件应用样式？

Question

我有一个组件，有四个不同的样式文件可根据某些变量应用。在渲染之前如何应用该组件的样式？

@Component({
    selector: 'settings-editor',
    templateUrl: './settings-editor.component.html',
    styleUrls: [ './a.less', './b.less' , './c.less' ]
})
export class SettingsEditorComponent implements OnInit {
   @Input()
   public styleType: string;


   ngOnInit() {
     if (this.styleType === 'A') { 
        // Apply styles  from a.less only

     } 
   }


}

- raven

Answer 1

在Angular中，使用AoT编译样式是在部署应用之前完成的，因此在运行时无法进行任何操作。如果没有使用AoT，则可能会起作用，但我不确定。

一种方法是添加它们所有的样式，并使用选择器在它们之间切换。

:host(.style1) {
  ...
}

:host(.style1) {
  ...
}

class MyComponent {
  style:string = 'style2';
  @HostBinding('class.style1') style1:boolean = style == 'style1';
  @HostBinding('class.style2') style2:boolean = style == 'style2';
}

- Günter Zöchbauer

Answer 2

Günter是正确的。这是一个Plunker，实现了这样一种策略：https://plnkr.co/edit/LfjCS6DMSi8d44O4Uhkj?p=preview

我实际上写了一篇关于动态样式化组件的博客文章，只是注意到我错过了这个可能性。我会添加它。

如果您不需要将其限定在单个组件中，而是更像是一个“全局”的主题故事，您也可以考虑在CSS层面处理这个问题。比如，有一个CSS类card，在style1.css中以一种方式进行样式设置，在style2.css中则是另外一种方式。

我还建议您查看Angular Material 2 repo。他们也在官方网站上讨论主题化。

- Juri