@HostBinding ze zmienną klasy w angular2

Question

Mam ten kod, który określa klasę na host:

@HostBinding('class.fixed') true; 

Co chciałbym zrobić, to ta zmienna klasy, które można zmodyfikować. Jak mogę to zrobić?

Answer 1

Nie można zmienić tej wartości.

Co można robić zamiast tego powiązać z właściwością klasy bezpośrednio

@HostBinding('class') classes = 'class1 class2 class3'; 

Answer 2

Jeśli masz ograniczoną liczbę klas można warunkowo dodać każdego z nich:

@HostBinding('class.c1') get c1() { return this.useC1; } 
@HostBinding('class.c2') get c2() { return this.useC2; } 

Zauważ, że .c1 i .c2 należy zdefiniować poza komponentem.

Plunker

Answer 3

Właściwie następujący format działa perfekcyjnie:

@HostBinding('class.className') variableName = true; 

Zamiast tego, co musi być ustalona jest Twój CSS (można zobaczyć dyskusję here).

Problemem jest to, że HostBinding widzi tylko zakres hosta, więc jeśli jakiś styl definiowania metadanych twoich Component trzeba określić, że css należy do zakresu gospodarza.

Aby to zrobić, można napisać:

:host(.className) { 
    /* Your CSS here */ 
} 

W miejsce

.className { 
    /* Your CSS here */ 
} 

Jeśli chcesz, stworzyłem Plunker pracy, które można zobaczyć clicking here

Answer 4

Można tworzyć niektóre oddzielone dyrektywy od klasy.

Na przykład: Mam przycisku w moją stronę i ma może stany: default, primary, danger i fluid. Przycisk może mieć wiele różnych stanów, ale pokażę ci te trzy stany z powodu ogromnej ilości kodu. Więc zacznijmy!

button.ts

//default button 

@Directive({ 
    selector: '[appButtonDefault]' 
}) 
export class ButtonDefaultDirective { 

    // the name of the field is not important 
    // if you put this directive to element, 
    // this element will have the class called 'button--default' 

    @HostBinding("class.button--default") 
    private defaultClass: boolean = true; 
} 


//primary button 

@Directive({ 
    selector: '[appButtonPrimary]' 
}) 
export class ButtonPrimaryDirective { 

    // the name of the field is not important 
    // if you put this directive to element, 
    // this element will have the class called 'button--primary' 

    @HostBinding("class.button--primary") 
    private primaryClass: boolean = true; 
} 


// danger button 

@Directive({ 
    selector: '[appButtonDanger]' 
}) 
export class ButtonDangerDirective { 

    // the name of the field is not important 
    // if you put this directive to element, 
    // this element will have the class called 'button--primary' 

    @HostBinding("class.button--danger") 
    private dangerClass: boolean = true; 
} 

@Directive({ 
    selector: '[appButtonFluid]' 
}) 
export class ButtonFluidDirective { 

    // the name of the field is not important 
    // if you put this directive to element, 
    // this element will have the class called 'button--primary' 

    @HostBinding("class.button--fluid") 
    private fluidClass: boolean = true; 
} 


// you need to also create a component class, 
// that import styles for this button 
@Component({ 
    //just put created selectors in your directives 
    selector: `[appButtonDefault], [appButtonPrimary], 
       [appButtonDanger], [appButtonFluid]`, 
    styleUrls: ['<-- enter link to your button styles -->'], 

    // it is required, because the content of <button> tag will disappear 
    template: "<ng-content></ng-content>" 
}) 
export class ButtonComponent {} 


// you don't have to do it, but I prefet to do it 

@NgModule({ 
    declarations: [ 
     ButtonDefaultDirective, 
     ButtonPrimaryDirective, 
     ButtonDangerDirective, 
     ButtonFluidDirective, 
     ButtonComponent 
    ], 
    exports: [ 
     ButtonDefaultDirective, 
     ButtonPrimaryDirective, 
     ButtonDangerDirective, 
     ButtonFluidDirective, 
     ButtonComponent 
    ] 
}) 
export class ButtonModule {} 

Nie zapomnij importować ButtonModule do pliku app.module.ts. To jest bardzo ważne.

app.component.html

<!-- This button will have the class 'button--default' --> 
<button appButtonDefault>Default button</button> 

<!-- But this button will have the class 'button--primary button--fluid' --> 
<button appButtonPrimary appButtonFluid>Primary and fluid</button> 

Mam nadzieję, że to pomaga.