google.maps.InfoWindow 中的 Angular 字体真棒答案

【问题标题】：Angular Font Awesome in google.maps.InfoWindowgoogle.maps.InfoWindow 中的 Angular 字体真棒
【发布时间】：2019-09-24 19:05:24
【问题描述】：

在 Google 地图信息窗口 (API) 中显示 Font Awesome 5 图标

在 html 模板中使用时，FA5 在我的 Angular 应用程序中按预期工作。但是当使用 google.maps.InfoWindow 时，我们在 Angular 之外，我无法使用例如

<fa-icon [icon]="['fas', 'location-arrow']"></fa-icon> 在内容 html 字符串中。

我们还希望在运行时之前将所有内容打包，因此 FA 不需要运行时调用 js 或 css。

谷歌地图信息窗口有一个这样的按钮：

drawInfoWindow() {
    this.infowindow = new google.maps.InfoWindow({
        content:
        "<div class='info-window'>"+
        "<button type='button' class='btn btn-vn btn-md btn-default'><div class='fas-wrapper'><fa-icon [icon]=\"['fas', 'location-arrow']\"></fa-icon></div> Navigate</button>"+
        "</div>"
    });
}

我还在 angular.json 中添加了"./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",，以防它有任何用处。

升级到FA5之前，我用过<i class='fas fa-location-arrow'></i>，效果很好，但后来我还在 index.html 中使用了 kit.fontawesome.com/***。

我认为我必须在我的 map-component.ts 文件中手动呈现图标，并将其传递给我的 drawInfoWindow 函数？但我不知道从哪里开始。有什么建议吗？

干杯！

【问题讨论】：

1.是的，您需要为此用例手动渲染 SVG。您可以使用 @fortawesome/fontawesome-svg-core 包中的 icon 函数将图标名称转换为渲染后的 SVG（检查此 comment 并让我知道您是否需要进一步的帮助）。 2. 至于CSS的自动插入，我推荐使用@fortawesome/fontawesome-svg-core的样式，因为它们被fa-icon组件使用（见here）。
非常感谢您的回答！我看了你的评论和那里的链接，但我对 Angular 有点太陌生了。由于我在 Google 地图信息窗口中需要此信息，因此我无法使用对 HTML 模板文件的引用。在<ng-container #refForCalling> 中包装我的drawInfoWindow 函数的内容也不起作用，因为它在Angular 之外。您知道不使用 html 模板 #ref 来呈现图标的示例吗？当然，在信息窗口content 输出中写入整个 svg 字符串确实有效，但我宁愿不这样做:)
我不是 Google Maps API 方面的专家，但从您的示例来看，它似乎希望您将内容作为带有 HTML 的字符串传递。 icon 函数是获取图标标记最简洁的方式。在这种情况下，我真的不明白 Angular 需要如何使用或可以提供帮助。
非常感谢！我所要做的就是import { icon } from '@fortawesome/fontawesome-svg-core'; import { faLocationArrow } from '@fortawesome/free-solid-svg-icons';，然后在我的信息窗口内容中使用icon(faLocationArrow).html。再次感谢！

标签： angular typescript google-maps google-maps-api-3 angular-fontawesome

【解决方案1】：

导入后

import { icon } from '@fortawesome/fontawesome-svg-core';
import { faLocationArrow } from '@fortawesome/free-solid-svg-icons';

我可以在我的信息窗口内容 html 中使用图标功能： icon(faLocationArrow).html

感谢雅罗斯拉夫管理员！

【讨论】：