Можно ли использовать один и тот же компонент, отличный от Angular 2?

Question

У меня есть общий компонент, который я хочу повторно использовать во всем приложении. Проблема в том, что я хочу по-разному стилизовать ее для разных частей сайта. Это возможно?

Я предполагаю, что есть способ пройти путь для стиля Url, но это кажется действительно грязным, и я надеюсь, что есть лучшая альтернатива.

Я также попытался это, но он не работает: При указании компонента, добавьте в классе, что-то вроде этого

<generic-component class="customStyle1"></generic-component> 

, а затем добавляет стиль, основанный на customStyle1 в таблицу стилей родовой-компоненте, но казалось, не подобрал стиль.

Answer 1

Вы можете использовать :host-context в качестве темы для своего component на основе какого-либо класса, применяемого там, где он используется.

Подробнее об этом here!!

test.css

:host-context(.theme-green) h3 { 
    background-color: green; 
} 

:host-context(.theme-red) h3 { 
    background-color: red; 
} 

app.component

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h3 class="title">Basic Angular 2</h3> 
    <my-test class="theme-green" ></my-test> 
    <my-test class='theme-red' ></my-test> 
    ` 
}) 
export class AppComponent { 
    constructor(){} 
} 

test.component

@Component({ 
    selector: 'my-test', 
    template: `<h3>Test Component</h3> 
    `, 
styleUrls : ['./app/test.css'] 
}) 
export class TestComponent { 
constructor(){} 
} 

Вот Plunker!!

Надеется, что это помогает !!

Answer 2

Вы можете использовать :host(...) селектор в сочетании с @HostBinding() как:

@Component({ 
    selector: 'my-comp', 
    styles: ` 
    :host([type-default]) { 
    background-color: red; 
    } 

    :host([type-header]) { 
    background-color: blue; 
    } 

    :host([type-main]) { 
    background-color: green; 
    } 
` 
}) 
export class MyComponent { 
    @Input() 
    @HostBinding('component-type') 
    componentType:String="type-default" 
} 

, а затем переключить стиль как

<header> 
    <my-comp componentType="type-header"></my-comp> 
</header> 

<main> 
    <my-comp componentType="type-main"></my-comp> 
</main> 

<my-comp></my-comp> 

Вы также можете применить класс с внешней стороны, как в вашем вопросе, а затем использовать переключатель :host(...), такой как

:host(.customStyle1) { 

Тогда вам не нужна эта часть

@Input() 
    @HostBinding('component-type') 
    componentType:String="type-default" 

, но таким образом, может быть полезно, если вы хотите совместить стиль с другими параметрами конфигурации для компонента.