google.maps.InfoWindow中的Angular字体很棒 [英] Angular Font Awesome in google.maps.InfoWindow

问题描述

在Google Maps信息窗口(API)中显示真棒5字体"图标

在HTML模板中使用

FA5可以在我的Angular应用程序中按预期工作.但是，当使用 google.maps.InfoWindow 时，我们不在Angular之内，而我无法使用例如

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

我们还希望所有内容都在运行时之前打包，因此没有运行时需要FA的js或css.

"Google地图信息"窗口具有这样的按钮:

  drawInfoWindow(){this.infowindow =新的google.maps.InfoWindow({内容:< div class ='info-window'>" +<按钮类型='按钮'class ='btn btn-vn btn-md btn-default'>< div class ='fas-wrapper'>< fa-icon [icon] = \"['fas'，'location-arrow'] \</fa-icon>//div导航</button>" +</div>"});} 

我还向添加了"./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 函数?但是我不知道从哪里开始.有建议吗?

干杯！

解决方案

导入后

 从"@ fortawesome/fontawesome-svg-core"导入{图标}；从"@ fortawesome/free-solid-svg-icons"导入{faLocationArrow}； 

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

谢谢Yaroslav Admin！

Display Font Awesome 5 icon in Google Maps Info Window (API)

FA5 works as expected in my Angular application when used in the html templates. But when using the google.maps.InfoWindow we're outside Angular, and I'm not able to use e.g

<fa-icon [icon]="['fas', 'location-arrow']"></fa-icon> in the content html string.

We also want everything to be packaged before runtime, so no runtime calls for js or css for FA.

The Google Maps info window has a button like this:

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>"
    });
}

I also added "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", to angular.json in case it could be of any use.

Before upgrading to FA5, I used <i class='fas fa-location-arrow'></i>, which worked well, but then I also used the kit.fontawesome.com/*** in my index.html.

I take it that I have to manually render the icon in my map-component.ts file, and pass it in to my drawInfoWindow function? But I'm at a loss as to where to start. Any suggetions?

Cheers!

解决方案

After importing

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

I could use the icon function in my info window content html: icon(faLocationArrow).html

Thank you to Yaroslav Admin!

这篇关于google.maps.InfoWindow中的Angular字体很棒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！