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

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

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

如果您没有必要将其范围扩展到单个组件，但如果它是一个“全局”主题故事，您还可以看一下在CSS级别处理它。就像拥有一个CSS类card一样，style1.css中的style2.css一种风格，而另一种{{1}}风格。

我也会尝试调查Angular Material 2 repo。他们还谈论theming on the official site。

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

2 个答案: