带有自定义标签的 Mapbox GL Popup 设置内容

Question

我正在尝试创建一个带有点击弹出窗口的标记，目前一切顺利， 问题是当我尝试将弹出窗口的内容设置为我的自定义标签时，例如

let popup = new mapboxgl.Popup()
    .setHTML("<custom-tag></custom-tag>")

我知道 setDOMContent 的选项，但我没有设法正确...它应该与 document.createElement 一起使用('custom-tag') 所以如果你能帮助我了解如何将它与自定义组件一起使用。感谢您的帮助！

Answer 1

我能够使用 Angular ComponentFactoryResolver 让它工作。有一些设置，但是一旦你让它工作，你就可以用它来渲染你想要的任何组件（并将它放在你想要的任何地方......包括一个地图框弹出窗口）。

我不确定这是否仍然是 "right" 的方法（我仍在使用 Angular v5），但它确实有效。

1) 创建动态组件服务（不记得我从哪里得到的...抱歉，无论您是谁，都没有署名）

import { Injectable, Injector, ApplicationRef, ComponentFactoryResolver, ComponentRef, Type } from '@angular/core'

@Injectable()
export class DynamicComponentService {

    private compRef: ComponentRef<any>;

    constructor(private injector: Injector,
                private resolver: ComponentFactoryResolver,
                private appRef: ApplicationRef) { }


    public injectComponent<T>(component: Type<T>, propertySetter?: (type: T) => void): HTMLDivElement {
        // Remove the Component if it Already Exists
        if (this.compRef) this.compRef.destroy();

        // Resolve the Component and Create
        const compFactory = this.resolver.resolveComponentFactory(component);
        this.compRef = compFactory.create(this.injector);

        // Allow a Property Setter to be Passed in (To Set a Model Property, etc)
        if (propertySetter)
            propertySetter(this.compRef.instance);

        // Attach to Application
        this.appRef.attachView(this.compRef.hostView);

        // Create Wrapper Div and Inject Html
        let div = document.createElement('div');
        div.appendChild(this.compRef.location.nativeElement);

        // Return the Rendered DOM Element
        return div;
    }
}

2) 使用该服务在 mapbox-gl 弹出窗口中呈现您的自定义组件

import { MyCustomMapboxPopup } from "../app/components/my-custom-mapbox-popup.component"
import { DynamicComponentService } from "../services/dynamic-component";

...
// Inside a map.on("click") or wherever you want to create your popup

// Inject Component and Render Down to HTMLDivElement Object
let popupContent = this.dynamicComponentService.injectComponent(
                MyCustomMapboxPopup,
                x => x.model = new PopupModel()); // This Is where You can pass
// a Model or other Properties to your Component

 new mapboxgl.Popup({ closeOnClick: false })
     .setLngLat(...wherever you want the popup to show) 
     .setDOMContent(popupContent)
     .addTo(map);
...

为了避免混淆，自定义弹出组件可能类似于：

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

@Component({
    selector: "custom-mapbox-popup",
    templateUrl: "./my-custom-mapbox-popup.component.html"
})
export class MyCustomMapboxPopup {
    public model: PopupModel; // Model Property
}

// HTML
<div class="my-custom-popup">
    <div *ngIf="model">
        <h3>{{this.model.SomeModelProperty}}</h3>
    </div>
</div>

带有自定义标签的 Mapbox GL Popup 设置内容

Mapbox GL Popup set content with custom tag

javascript

jquery

mapbox

mapbox-gl-js

angular