Mapbox GL Popup使用自定义标签设置内容

Question

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

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

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

Answer 1

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

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