프로그래밍 방식으로 구성 요소에 스타일 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

스타일 따라서 런타임에 할 수있는 아무것도, 당신은 응용 프로그램을 배포하기 전에이 작업이 완료 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이며이 가능성을 놓쳤습니다. 그것을 추가 할 것입니다.

단일 구성 요소로 범위를 지정할 필요가 없지만 "글로벌"테마 스토리 인 경우 CSS 수준에서 처리하는 방법을 살펴볼 수도 있습니다. 예를 들어 CSS 클래스 card을 가지고있는 것과 마찬가지로 style1.css은 편도 스타일이고 다른 하나는 style2.css입니다.

나는 또한 Angular Material 2 repo을 조사하려고합니다. 그들은 또한 theming on the official site에 대해서도 이야기합니다.