Azure Maps HTML 标记忽略 Angular 中的 CSS

Question

我目前正在使用 Azure Maps 处理 Angular 11+ 项目。我想创建一个自定义 CSS 样式的 HTML 标记，如文档 (https://docs.microsoft.com/en-us/azure/azure-maps/map-add-custom-html) 中所示，但 Angular 似乎完全忽略了 CSS。使用 F12 我可以找到标记，但我无法直观地看到它。如果我使用内联 CSS 创建 HTML 标记，则没有问题，但我真的很想像在文档中那样将两者分开。
我使用 npm install azure-maps-control 安装了 Azure Maps。

index.html：

<link
  rel="stylesheet"
  href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css"
  type="text/css"
/>

ma​​p.component.html：

<div id="myMap"></div>

ma​​p.component.ts：

import { Component, OnInit } from '@angular/core';
import * as atlas from 'azure-maps-control';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
      
  constructor() {}

  ngOnInit(): void {

// build the map
var map = new atlas.Map('myMap', {
  center: [10.39, 55.393],
  zoom: 12,
  showLogo: false,
  showBuildingModels: true,
  style: 'grayscale_light',
  language: 'da-DK',
  authOptions: {
    authType: atlas.AuthenticationType.subscriptionKey,
    subscriptionKey: 'key',
  },
});

// add controls like zooming, compass and pitch to the map
map.controls.add(
  [
    new atlas.control.ZoomControl(),
    new atlas.control.CompassControl(),
    new atlas.control.PitchControl(),
  ],
  { position: atlas.ControlPosition.TopRight }
);

map.events.add('ready', () => {

  var marker = new atlas.HtmlMarker({
    htmlContent: '<div class="test"></div>', // <-- this does not work
    position: [10.39, 55.393],
    pixelOffset: [5, -18],
  });

  map.markers.add(marker);

  var marker2 = new atlas.HtmlMarker({
    htmlContent:
      '<div style="background-color: blue; width: 20px; height: 50px;"></div>', // <-- this works fine
    position: [10.55, 55.393],
    pixelOffset: [5, -18],
  });

  map.markers.add(marker2);
});

}

ma​​p.component.css：

html,
body {
  margin: 0;
}

#myMap {
  height: calc(100vh - 58px);
  width: 100vw;
}

.test {
  background-color: red;
  width: 20px;
  height: 20px;
}

如何在此处将 CSS 文件连接到 HTML？任何建议将不胜感激。

Answer 1

我远非 CSS 专家，但我认为这与 angular 的视图封装有关。您正在尝试将样式应用于不属于您的组件的 DOM 元素。

有两种可能：

• 将您的样式声明为全局样式。你只需要把你的风格放在styles.scss上。

styles.scss

body {
  margin: 0;
}

.test {
  background-color: red;
  width: 20px;
  height: 20px;
}

• 在组件的 scss 文件中使用 ::ng-deep 伪选择器。这基本上将您的样式块声明为全局样式规则。 目前已弃用，因此您可能更喜欢第一种解决方案。更多信息在这里：https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

ma​​p.component.scss

#myMap {
  height: calc(100vh - 58px);
  width: 100vw;
}

:host ::ng-deep .test {
  background-color: red;
  width: 20px;
  height: 20px;
}

在这两种情况下，样式都会应用于您的 HTML 标记

希望这会有所帮助！

Answer 2

我不是角度专家，但看看你的帖子，你的样式导入中似乎有“.scss”，而你的文件有“.css”文件扩展名。

尝试向您的页面添加一个 div 并为其指定相同的“测试”类名称，以查看该 CSS 类是否正在加载到页面中。