当agm-map在组件中时，则不呈现map。

Question

目标

我试图在我自己的<agm-map>组件中包装一个<app-map>，但它甚至不在HTML中呈现。

​

​

agm (角谷歌地图)库配置良好，单独使用标记时地图显示良好，但我需要提供自己的组件。

我尝试过的事物

• https://github.com/sebholstein/angular-google-maps/issues/1101
• https://github.com/sebholstein/angular-google-maps/issues/1319
• https://stackoverflow.com/a/55099459/1461862

下面是组件模板的代码

map.component.html

<agm-map flex #map [latitude]="latitude" [zoomControl]="true" [longitude]="longitude" [zoom]="zoomLevel" [zoomControl]="hasZoomControls">
  <agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="isMarkerDraggable" (dragEnd)="onDragEnd($event)"> </agm-marker>
</agm-map>

map.component.css

agm-map {
  height: 130px;
  width: 100%;
}

map.component.ts

import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
import { AgmMap } from '@agm/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements AfterViewInit {
  @Input() latitude = 0;
  @Input() longitude = 0;
  @Input() zoomLevel = 4;
  @Input() hasZoomControls = true;
  @Input() isMarkerDraggable = true;

  @ViewChild('map') public agmMap: AgmMap;

  ngAfterViewInit(): void {
    console.log('ngAfterViewInit');
    if (this.agmMap) {
      setTimeout(() => {
        console.log('Resizing');
        this.agmMap.triggerResize();
      }, 100);
    } else {
      console.log('map was not rendered');
    }
  }
  onDragEnd(event): void {
    console.log('dragged');
  }
}

以及我添加的新组件的shared.module.ts

@NgModule({
  declarations: [...,MapComponent] 

我还能错过什么？

Answer 1

我所需要的就是导出共享模块上的组件。

exports: [ ..., MapComponent],