example - @HostBinding con una clase variable en angular2

hostlistener angular 4

Question

Tengo este código que establece una clase en el host:

@HostBinding(''class.fixed'') true;

Lo que me gustaría hacer es hacer de esta una clase variable que pueda modificar. ¿Cómo puedo hacer esto?

Answer 1

En realidad el siguiente formato funciona perfectamente:

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

En su lugar, lo que se debe corregir es su CSS (puede ver una discusión here ).

El problema es que HostBinding solo ve el alcance del host , por lo que si está definiendo algún estilo en los metadatos de su Component , debe especificar que css pertenece al alcance del host.

Para hacerlo, puedes escribir:

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

En lugar de

.className {
  /* Your CSS here */
}

Si quieres, he creado un Plunker en funcionamiento que puedes ver haciendo clic aquí.

Answer 2

Esto no puede hacerse variable.

Lo que puede hacer en su lugar es enlazar a la propiedad de clase directamente

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

Answer 3

La respuesta de Günter no es realmente útil en caso de que ya haya algunos nombres de clase vinculados a una variable.

Una buena manera de combinar nombres de clase de cadena variable con nombres de clase predefinidos de estilo booleano es usar el paquete de nombres de classnames npm.

Úselo junto con @HostBinding y una función de establecimiento para obtener resultados sorprendentes:

import * as classNames from ''classnames'';

(...)

@HostBinding(''class'') get classes(): string {
  return classNames(this.getDynamicClassName(), {
    ''is-open'': this.isOpen,
    ''has-children'': this.hasChildren
  });
}

Answer 4

Puedes crear algunas directivas separadas con clase.

Por ejemplo : tengo un botón en mi página y tiene varios estados: default , primary , danger y fluid . Button puede tener muchos estados diferentes, pero le mostraré estos tres estados debido a la gran cantidad de código. ¡Así que comencemos!

botón.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 {}

No olvide importar ButtonModule a su archivo app.module.ts . Es muy importante.

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>

Espero que ayude.

Answer 5

Si tiene un número limitado de clases, puede agregar condicionalmente cada una:

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

Tenga en cuenta que .c1 y .c2 deben definirse fuera del componente.

Plunker