Angular项目中Azure Maps自定义HTML Marker的外部CSS样式不生效问题

问题根本原因 #

Angular 默认采用 ViewEncapsulation.Emulated 视图封装模式，会自动为组件内定义的所有CSS选择器追加专属的组件属性标记（形如[_ngcontent-xxx]），实现组件间的样式隔离。而 Azure Maps SDK 创建的HtmlMarker元素是由SDK直接注入到地图底层DOM结构中的，完全不属于当前Angular组件的原生DOM节点树，因此组件内定义的.test类样式无法匹配到对应的marker元素，自然不会生效。

可行的解决方式 #

• 调整组件的视图封装配置
  从@angular/core引入ViewEncapsulation枚举，在@Component装饰器中追加encapsulation: ViewEncapsulation.None配置，关闭模拟样式封装，让组件内定义的样式成为全局可匹配的常规样式。配置示例：

  import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  import * as atlas from 'azure-maps-control';
  
  @Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.scss'],
    // 新增配置项
    encapsulation: ViewEncapsulation.None
  })
  export class MapComponent implements OnInit {
    // 原有地图初始化、marker创建的逻辑无需改动
  }
  

  注意：开启该配置后，当前组件引入的所有样式都会变为全局样式，建议给自定义marker的类名增加专属前缀，避免和其他页面的样式产生冲突。

• 将自定义marker样式移至全局样式文件
  不要把.test的样式写在map.component.css/scss组件样式文件中，直接写入项目全局样式入口（即angular.json中配置的全局styles.css/scss文件）。全局样式没有Angular的视图封装属性选择器限制，可以直接匹配SDK动态生成的DOM元素。对应的全局样式示例：

  /* 全局styles.css内的样式 */
  html,
  body {
    margin: 0;
  }
  
  #myMap {
    height: calc(100vh - 58px);
    width: 100vw;
  }
  
  .test {
    background-color: red;
    width: 20px;
    height: 20px;
  }
  

• 使用深度选择器穿透组件样式隔离
  如果需要保留组件的样式隔离机制，也不想把marker样式放到全局文件中，可以在组件样式内使用Angular官方提供的深度选择器::ng-deep，绕过视图封装的匹配限制，让组件样式可以匹配到组件DOM内的非Angular生成的元素。组件样式写法示例：

  /* map.component.scss 内的样式 */
  ::ng-deep .test {
    background-color: red;
    width: 20px;
    height: 20px;
  }
  

  说明：::ng-deep 是Angular 11+版本正式支持的样式穿透语法，目前没有被废弃的计划。

内容的提问来源于stack exchange，提问作者rebecka.th