angular - 如何将css分配给嵌入在Angular中的ts变量中的html

Question

我正在尝试将谷歌地图实现到一个角度应用程序中。

我正在使用Maps javascript API，并放置了一些自定义标记和窗口信息 标记代码如下所示：

var icon = {
          url: "../../../assets/brand/marker.svg",
          scaledSize: new google.maps.Size(40, 40), // scaled size
          origin: new google.maps.Point(0,0), // origin
          anchor: new google.maps.Point(0, 0) // anchor
      };
        const marker = new google.maps.Marker({
          position: ofMarker.localisation,
          map: this.map,
          icon: icon,
        });

InfoWindow 代码如下所示：

var infowindow = new google.maps.InfoWindow();
        marker.addListener("click", () => {
          const content = `<div style="display: flex;
          background-color: red;
          height: 70px;
          width: 175px;
          margin-top: 5px;">
          <div class="icon-container">
            <img class="icon" src="../../../assets/brand/marker.svg"/>
          </div>
          <div class="text-container">
            <div>d
              ${ofMarker.customer} - ${ofMarker.place}
            </div>
            <div>
            ${this.getAddressFromCoords(ofMarker.localisation.lat, ofMarker.localisation.lng)}
            </div>
          </div>
        </div>`;
          infowindow.setContent(content);
          infowindow.open(this.map, marker);
        });
        return marker;
      });

一切都像那样工作正常，但是您可能认为代码很脏。我在 Typescript 变量中直接有 HTML 和 CSS。

我该如何清理它（将 css 放在 .css 类中，将 html 放在 Window 组件中）？还是有其他方法可以清理该代码？

标签： angulartypescriptgoogle-maps-api-3coding-styleclean-architecture