Soy nuevo en Angular. Intenté hacer un componente de botón/insignia. Pero cuando trato de usarlo más de una vez, el css se superpone y se comporta mal. Creo que cuando se creó una nueva instancia del componente de insignia por segunda vez, se sobrescribió en la primera, no estoy seguro.
aplicación.html
<div class="container"> <app-badge [title]="'First'" [bgColor]="'Green'"></app-badge> <app-badge [title]="'Second'" [bgColor]="'Blue'"></app-badge> </div>insignia.html
<div class="container"> {{title}} </div>insignia.ts
import { Component, ElementRef, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-badge', templateUrl: './badge.component.html', styleUrls: ['./badge.component.css'] }) export class BadgeComponent implements OnInit { @Input() title : String="Badge"; @Input() bgColor : String=""; constructor() { } ngOnInit(): void { } ngAfterViewInit(){ const ele = (document.getElementsByClassName('container')[0]); ele.setAttribute("style", `background-color:${this.bgColor};`); } }Sí, eso es exactamente lo que está sucediendo como usted explicó, cuando se muestra la segunda app-badge , también sobrescribirá el fondo de la primera a azul.
La primera app-badge se muestra como Green . Luego, la segunda app-badge se representa como Blue .
Cuando se muestra la segunda app-badge realidad está diciendo esto: tome el primer elemento [0] del container y establezca este fondo en this.bgColor que es azul. Así que ahora la primera app-badge que es verde se vuelve azul y ahora ambas son azules.
const ele = (document.getElementsByClassName('container')[0]); ele.setAttribute("style", `background-color:${this.bgColor};`);Le sugiero que elimine la manipulación de documentos por completo:
ngAfterViewInit(){ const ele = (document.getElementsByClassName('container')[0]); ele.setAttribute("style", `background-color:${this.bgColor};`); } Y cambie el color en badge.component.html usando NgStyle (no sé qué tiene ahí, pero sería algo así):
<div [style.background-color]="bgColor">El problema es que está configurando el color de fondo para el primer elemento con el container de nombre de clase aquí
const ele = (document.getElementsByClassName('container')[0]); Entonces, en su ejemplo, el div que contiene ambas insignias está pintado de azul, mientras que las insignias no tienen colores de fondo, ya que solo se selecciona el primer elemento con container de clase en el DOM cada vez.
Para solucionarlo, actualice su badge.ts para eliminar ngAfterViewInit()
import { Component, ElementRef, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-badge', templateUrl: './badge.component.html', styleUrls: ['./badge.component.css'], }) export class BadgeComponent implements OnInit { @Input() title: String = 'Badge'; @Input() bgColor: String = ''; constructor() {} ngOnInit(): void {} } y su badge.html para aplicar bgColor usando ngStyle :
<div [ngStyle]="{ 'background-color': bgColor }"> {{ title }} </div>