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

Question

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

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

我知道setDOMContent的选项，但是我没有设法正确...它应该与document.createElement（'custom-tag'）一起使用，所以如果可以的话我将介绍如何将其与自定义组件一起使用。谢谢您的帮助！

Answer 1

我能够使用Angular ComponentFactoryResolver来使其工作。有一些设置，但是一旦它开始工作，就可以使用它来呈现所需的任何组件（并将其放置在您想要的任何位置...包括一个mapbox弹出窗口）。

我不确定这是否仍然是执行此操作的“正确”方法（我仍在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>

Answer 2

我应用了您并回答，并且效果很好，但是在这种情况下，它可以使用一个标记，但是如果我同时需要更多标记，该怎么办，因为我尝试过，只有最后一个标记弹出，另一个什么也没显示，有办法吗？