agm-map更改整个页面的字体

问题描述

当我的页面将所有字体加粗时，

im使用带有角度9的agm-map。我尝试在没有agm-map的情况下测试我的前端，并且一切正常，但是当我添加该特定行时，它将所有内容加粗这是我的代码

<mat-card class="example-card">
<agm-map
            class="temp"
            [latitude]="lat"
            [longitude]="lng"
            [zoom]="zoom"
          >
            <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
          </agm-map>
        </mat-card>

我的CSS

agm-map {
  height: 450px !important;
  width: 100%; /* This is really important*/
}

before loading the map and after loading the map 任何建议或任何人都可以指出我在这里做错了什么非常感谢

解决方法

一种解决方案是通过指令阻止加载 Google 字体 //fonts.googleapis.com/css?family=Roboto

文件 google-fonts-loading-disable.directive.ts

import { Directive } from '@angular/core';
    
@Directive({
  selector: '[appGoogleFontsLoadingDisable]'
})
export class GoogleFontsLoadingDisableDirective {
  constructor() {
    const head = document.getElementsByTagName('head')[0] as any;
    const insertBefore = head.insertBefore;
    head.insertBefore = function (newElement: any,referenceElement: any) {
      if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) {
        return;
      }
      insertBefore.call(head,newElement,referenceElement);
    };
  }
}

添加在 app.modules.ts 中注册的指令

@NgModule({
declarations: [
    AppComponent,GoogleFontsLoadingDisableDirective,

并在 Google 地图中使用该指令

<agm-map appGoogleFontsLoadingDisable [latitude]="event.geo.lat" [longitude]="event.geo.lgtd" [zoom]="14" style="height: 60vh;">
    <agm-marker [latitude]="event.geo.lat" [longitude]="event.geo.lgtd" [label]="event.eventCd" [title]="event.eventCd+' '+event.eventCreatedDtm"></agm-marker>
</agm-map>

angular angular8 angular9