Angular复用Thumbnail组件时多实例样式相互干扰如何解决？

问题根因 #

你的问题核心是全局元素定位逻辑导致的跨实例干扰，具体原因有两个：

• HTML的id属性是全局唯一标识，多个复用组件里写死相同的id（top、img、text等），会导致页面出现大量重复id，DOM选择器会定位异常
• jQuery的$()选择器是全局范围查找元素，不会限定在当前组件内部，所以每次执行样式修改都会命中页面上所有匹配id的元素，最后一个初始化的组件实例的样式自然会覆盖所有其他实例

修复步骤 #

第一步：删除模板里的固定id，改用Angular模板引用变量 #

修改你的组件HTML代码：

<div class="thumbnail-div" #topDiv>
    <img #imgEl class="img" [src]="image" alt="">
    
    <p #textEl class="text">
      <a #linkEl class="link" [href]="link">{{title}}</a><br>
      <i #itaEl class="itaics">By {{author}}</i>
    </p>
</div>

第二步：替换jQuery全局查找，用Angular自带API获取当前组件内的元素 #

修改组件TS代码，移除jQuery依赖，改用@ViewChild获取当前组件内的元素引用，用Renderer2操作样式，保证只会修改当前实例的元素：

import { Component, Input, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'thumbnail',
  templateUrl: './thumbnail.component.html',
  styleUrls: ['./thumbnail.component.css'],
})
export class ThumbnailComponent implements OnInit {
  // 原有@Input属性全部保留
  @Input() width: string;
  @Input() height: string;
  @Input() img_width: string; 
  @Input() img_height: string;
  @Input() text_width: string; 
  @Input() text_height: string;
  
  @Input() title: string;
  @Input() author: string;
  @Input() image: string;
  @Input() link: string;
  @Input() color: string;
  
  @Input() fontSize: string;
  @Input() ita_fontSize: string;
  @Input() left: boolean;
  @Input() right: boolean;
  @Input() bottom: boolean;
  @Input() top: boolean;
  @Input() move_v: string;
  @Input() move_h: string;
  @Input() padding: string;
  @Input() pos: string;

  @Input() long:boolean;
  @Input() text: boolean;
  @Input() short:boolean;
  @Input() thumbnail: boolean;

  // 绑定当前组件内的元素引用
  @ViewChild('topDiv') topDiv: ElementRef;
  @ViewChild('imgEl') imgEl: ElementRef;
  @ViewChild('textEl') textEl: ElementRef;
  @ViewChild('linkEl') linkEl: ElementRef;
  @ViewChild('itaEl') itaEl: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngOnInit(): void {
    if(this.long){
      this.longStyle();
    }else if(this.text){
      this.longTextStyle();
    }else if(this.short){
      this.shortStyle();
    }else if(this.thumbnail){
      this.cardStyle();
    }
  }

  // 以longStyle为例，其余样式方法按相同逻辑修改即可
  longStyle(){
    const topNative = this.topDiv.nativeElement;
    const imgNative = this.imgEl.nativeElement;
    const textNative = this.textEl.nativeElement;
    const itaNative = this.itaEl.nativeElement;

    this.renderer.setStyle(topNative, 'width', '100%');
    this.renderer.setStyle(topNative, 'height', '500px');

    this.renderer.setStyle(imgNative, 'width', '100%');
    this.renderer.setStyle(imgNative, 'height', '100%');
    this.renderer.setStyle(imgNative, 'filter', 'brightness(50%)');

    this.renderer.setStyle(textNative, 'background-color', this.color);
    this.renderer.setStyle(textNative, 'color', 'aliceblue');
    this.renderer.setStyle(textNative, 'font-size', '30px');
    this.renderer.setStyle(itaNative, 'font-size', '20px');

    if(this.pos == 'left'){
      this.renderer.setStyle(textNative, 'left', '100px');
    }else if(this.pos == 'right'){
      this.renderer.setStyle(textNative, 'right', '100px');
    }
    
    this.renderer.setStyle(textNative, 'bottom', '50px');
  }

  // 剩余longTextStyle、shortStyle、cardStyle方法按照上述逻辑替换jQuery代码即可
}

优化建议 #

更推荐用Angular的ngClass指令绑定样式类，把不同类型的样式提前写到组件的css文件中，完全不需要手动操作DOM，代码更易维护：

<div class="thumbnail-div" [ngClass]="{
  'long-style': long,
  'text-style': text,
  'short-style': short,
  'card-style': thumbnail
}">
<!-- 其余元素同理绑定对应类即可 -->

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