Angular多次复用自定义子组件时属性样式重叠覆盖问题

你的判断是正确的，后加载的组件实例确实覆盖了前序设置，但问题诱因是你使用了错误的DOM操作方式：
你在ngAfterViewInit中调用document.getElementsByClassName('container')[0]是全局扫描整个页面所有携带container类名的元素，永远取DOM树中排序最靠前的匹配项，完全没有限定在当前组件实例的DOM范围内。两个徽章组件实例依次触发生命周期时，两次操作的都是同一个全局匹配到的元素，后执行的蓝色背景配置自然会覆盖之前设置的绿色背景，最终出现样式重叠、渲染异常的问题。
额外提醒：Angular本身提供了组件样式隔离、模板属性绑定等能力，非必要不要直接操作全局document对象，非常容易出现跨组件的DOM污染。

父组件模板 app.html #

<div class="container">
  <app-badge [title]="'First'" [bgColor]="'Green'"></app-badge>
  <app-badge [title]="'Second'" [bgColor]="'Blue'"></app-badge>
</div>

徽章组件模板 badge.component.html #

<div class="container">
    {{title}}
</div>

徽章组件逻辑 badge.component.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};`);
  }

}

• 方案1（推荐，符合Angular开发规范）：直接使用模板样式绑定，完全移除原生DOM操作逻辑
  修改徽章组件模板，给内部容器绑定动态样式：

  <div class="container" [style.background-color]="bgColor">
      {{title}}
  </div>
  

  同时删除组件类中整个ngAfterViewInit方法即可。Angular会针对每个组件实例独立完成样式绑定，从机制上避免实例间的样式污染。

• 方案2（适配必须操作DOM的场景）：通过依赖注入获取当前组件的元素引用，限定DOM查找范围
  如果遇到必须手动操作DOM的场景（比如对接第三方原生DOM库），不要直接调用全局document方法，而是在构造函数中注入ElementRef获取当前组件的宿主元素，仅在组件自身的DOM范围内查找目标元素，修改后的组件逻辑如下：

  import { Component, ElementRef, Input, OnInit, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-badge',
    templateUrl: './badge.component.html',
    styleUrls: ['./badge.component.css']
  })
  export class BadgeComponent implements OnInit, AfterViewInit {
  
    @Input()
    title : String="Badge";
    @Input()
    bgColor : String="";
  
    constructor(private el: ElementRef<HTMLElement>) { }
  
    ngOnInit(): void {
      
    }
  
    ngAfterViewInit(){
      // 仅在当前组件的DOM范围内查找元素，不会影响其他组件
      const ele = this.el.nativeElement.querySelector('.container');
      ele?.setAttribute("style", `background-color:${this.bgColor};`);
    }
  
  }
  

内容的提问来源于stack exchange，提问作者Kartiken Barniwal