javascript - 将传单弹出窗口调整为 Angular 传单中的表格大小

Question

我在传单 map 上有一个图层的弹出窗口，当您单击 map 上的一个点时会出现一个弹出窗口。弹出窗口应显示一个包含该特定图层数据的表格。但是，弹出窗口不会根据表格大小进行调整:

但是当我去掉 leaflet-popup-content 的默认宽度时弹出窗口没有出现在该点的正上方，而是向右移动:

我显示弹出窗口的方式如下(在我的弹出服务中):

let popupOptions = {
   className: "popup",
   maxWidth: 250 // This doesn't do anything for some reason
};

L.popup(popupOptions)
   .setLatLng(latLng)
   .setContent(this.compilePopup(PopupComponent))
   .openOn(map);

你可以看到我是 注入(inject)将 PopupComponent 放入 Leaflet 弹出窗口，而不仅仅是对 html 进行硬编码。 this.compile功能看起来像:

private compilePopup(component: any) {
    const compFactory: any = this.resolver.resolveComponentFactory(component);
    let compRef: any = compFactory.create(this.injector);

    this.appRef.attachView(compRef.hostView);
    compRef.onDestroy(() => this.appRef.detachView(compRef.hostView));

    let div = document.createElement('div');
    div.appendChild(compRef.location.nativeElement);
    return div;

这就是我的 PopupComponent HTML 的样子:

<ng-template>
    <table class="table table-striped table-bordered table-condensed table-hover">
        <tr>
            <th *ngFor="let col of columns;">
                {{columns}}
            </th>
        </tr>
        <tr>
            <td *ngFor="let col of columns;">
                {{columnDetails[columns]}}
            </td>
        </tr>
    </table>
</ng-template>

弹出组件.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit {
  columnDetails: any;
  columns: Array<string> = ["Column 1", "Column 2", "Column 3"];


  constructor(
    private popupService: PopupService,
    private popupStore: PopupStore
  ) {
    this.columnDetails= this.popupService.columnDetails;

  }
}

我初始化传单 map 的方式是在我的 map-component.ts 中:

  options: MapOptions = {
    center: latLng(47.5786262, -122.1654623),
    minZoom: 4,
    layers: [
      L.gridLayer.googleMutant({
        type: 'roadmap', // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
        styles: [
          {
            featureType: "poi.business",
            elementType: "labels",
            stylers:
              [
                {
                  visibility: "simplified"
                }
              ]
          }
        ]
      }),
    ],
    zoom: 5,
    zoomControl: false
  };

map -component.html:

<div id="map"
    leaflet [leafletOptions]="options"
    (leafletMapReady)="onMapReady($event)"
    (leafletMapMove)="onMapMove($event)"
    (leafletMapZoom)="onMapZoom($event)"
    (leafletClick)="onMapClick($event)">
</div>

现在我发现另一个问题 exact same problem as mine看到你可以设置 maxWidth: "auto"或使用 update() ，但这两个解决方案对我不起作用，因为那是专门针对 Leaflet javascript 的，而我正在使用 ngx-leaflet，angular Leaflet。
我怎样才能得到它，以便弹出窗口调整到我的表格大小并且弹出窗口正好在我点击的标记上方？或者有没有办法将其他解决方案转换为我的代码？任何帮助是极大的赞赏!

Answer 1

您可以预先计算列的总宽度，然后将该值用作 minWidth为 popupOptions :

const columnsWidth: number = columns.length * 80 // assuming each column width is 80px

const popupOptions = {
   className: "popup",
   minWidth: columnsWidth // use the calculated width
   ...
};

L.popup(popupOptions)

为此，您应该为列分配固定宽度(此处使用内联样式仅用于示例目的):

<table>
    ...
    <td *ngFor="let col of columns" style="width: 80px">
        {{columnDetails[columns]}}
    </td>
    ...
</table>

它将使 Leaflet 能够正确呈现弹出式布局并在 map 上正确定位图钉。
引用: Leaflet documentation