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

发布时间：2020-12-17 17:32:58 所属栏目：安全来源：网络整理

导读：我有一个包含四种不同样式文件的组件,可以根据某些变量应用它们.如何在呈现之前应用该组件的样式？ @Component({ selector: 'settings-editor',templateUrl: './settings-editor.component.html',styleUrls: [ './a.less','./b.less','./c.less' ]})export c

我有一个包含四种不同样式文件的组件,可以根据某些变量应用它们.如何在呈现之前应用该组件的样式？

@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

     } 
   }


}

解决方法

样式由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';
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!