Angular中JQuery动态添加的TD内元素样式不生效问题

问题原因 #

Angular默认开启视图封装（ViewEncapsulation.Emulated），会自动给组件内的DOM元素添加专属属性（如_ngcontent-xxxxx），同时将组件CSS中的选择器改写为包含该属性的形式（比如.smallField会变成.smallField[_ngcontent-xxxxx]）。而通过jQuery动态插入的DOM元素不会带上这个专属属性，导致组件CSS中的样式无法匹配这些元素。

解决方案 #

方案1：使用深度选择器穿透视图封装 #

在hotel.component.css中给样式添加::ng-deep前缀，让样式能作用到动态添加的元素：

::ng-deep .smallField {
    display: inline-block; 
    width: 50px;
}
            
::ng-deep .bigField {
    display: inline-block; 
    width: 170px;
}

注意：::ng-deep属于过渡性API，未来可能被Angular移除，建议优先使用方案3。

方案2：关闭组件的视图封装 #

在组件类的装饰器中关闭视图封装，使组件样式变为全局样式：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-hotel',
  templateUrl: './hotel.view.html',
  styleUrls: ['./hotel.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class HotelComponent {
  // 组件逻辑代码
}

注意：关闭视图封装后需确保样式类名唯一，避免与全局或其他组件样式冲突。

方案3：改用Angular原生方式动态渲染（推荐） #

Angular提倡数据驱动视图，避免直接操作DOM。通过*ngFor循环渲染房间列表，添加新行时只需更新数据数组即可：

1. 修改hotel.view.html

<table id="rooms">
  <tr>
    <td>Room Type</td><td>Beds</td><td>Q.ty</td>
  </tr>
  <!-- 用*ngFor循环渲染所有房间行 -->
  <tr *ngFor="let room of HotelModel.rooms; let i = index">
    <td><input [(ngModel)]="room.type" name="type-{{i}}" type="text"></td>
    <td><input [(ngModel)]="room.beds" name="beds-{{i}}" type="number" class="smallField"></td>
    <td><input [(ngModel)]="room.qty" name="qty-{{i}}" type="number" class="smallField"></td>
  </tr>      
</table>
<button (click)="addRoom()">Add Room</button>

注：每个input的name属性需唯一，通过index拼接避免表单控件命名冲突。

2. 在组件类中实现addRoom方法

export class HotelComponent {
  HotelModel = {
    rooms: [
      { type: '', beds: 0, qty: 0 } // 初始房间数据
    ]
  };

  addRoom() {
    // 往数组中添加新房间对象，DOM会自动更新
    this.HotelModel.rooms.push({ type: '', beds: 0, qty: 0 });
  }
}

这种方式完全遵循Angular数据流模式，样式和双向绑定都会正常生效，同时避免了直接操作DOM的潜在问题。

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