Digamos que tengo un componente angular, es decir, <this-thing></this-thing> que hace lo suyo.

Ahora quiero agregarle algo extra, es decir, <this-thing glows></this-thing> Me gustaría que el componente cambie un poco si el atributo brillo está allí.

He logrado hacerlo a través de <this-thing [glows]="true"></this-thing> y en el componente que tengo

@Input() public set glows(value: boolean) {
    console.log(value);
}

Pero eso se vuelve demasiado detallado.

Si el atributo de resplandor no está en el componente, entonces es falso y si es así, entonces es verdadero.

¿Hay una mejor manera de lograr esto?

Gracias por buscar.

0
Sprep 29 may. 2020 a las 11:47

3 respuestas

La mejor respuesta

Use @Attribute y @optional en el constructor vea los documentos

constructor(@Optional() @Attribute('glow') glow: any) {
  console.log(glow)
  console.log(glow==undefined)
}

<hello glow></hello> //give you '',false
<hello></hello> //give you null,true
1
Eliseo 29 may. 2020 a las 10:27

Creo que depende de lo que intentes lograr. Si es solo un valor booleano para usar en el componente / plantilla, no creo que necesite el setter, de modo que

@Input() glows : boolean;

En this-thing.component.ts sería suficiente.

En this-thing.component.html puede vincular una clase específica al elemento dom con ngClass

<div [ngClass]="{'glows': glows}">This glows if true</div>

This-thing.component.css

.glows {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
0
yax 29 may. 2020 a las 10:22

Puede lograr esto con el decorador @HostBinding que le permite cambiar el atributo más adelante dentro de su código .

Código de ejemplo para el atributo glows en el código del componente

@HostBinding('attr.glows')
public glows: boolean;

this.glows = true; // Sets the glows attribute
this.glows = false; // Removes the glows attribute

Código de ejemplo para el atributo glows en los estilos de componentes

:host([glows]) {
  /* Custom styles for component when the attribute is present */
} 
0
Žan Ožbot 29 may. 2020 a las 10:40