如何以编程方式将样式应用于组件 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

     } 
   }


}

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';
}

Answer 2

君特是对的。这是一个实施这种策略的 Plunker：https://plnkr.co/edit/LfjCS6DMSi8d44O4Uhkj?p=preview

我实际上 wrote a blog post on dynamically styling components 并且只是注意到我错过了这种可能性。要添加它。

如果您没有必要将其范围限定为单个组件，但如果它更像是一个 "global" 主题故事，您还可以查看 CSS 中的处理方式等级。比如 CSS class card 在 style1.css 中是一种样式，在 style2.css 中是另一种样式。

我也会尝试查看 Angular Material 2 repo. They also talk about theming on the official site。

如何以编程方式将样式应用于组件 angular 2？

How to apply styles to a component programatically angular 2?

angular2-components

angular