小编Nic*_* Dv的帖子

角度组件进入传单弹出窗口

无法弄清楚如何将组件生成到传单弹出窗口中。我尝试了两件事:

首先,将组件选择器集成到 html 中,但看起来好像 angular 没有编译它:

    let my geojson = L.geoJSON(data, {
        onEachFeature: (feature, layer) => {
            let popup = L.popup().setContent('<app-component-detail></app-component-detail>');
            layer.on({
                click: () => {
                    layer.bindPopup(popup);
                }
            })
        }
    }).addTo(map);
Run Code Online (Sandbox Code Playgroud)

当我点击地图上的一个点时,弹出窗口是空的。

然后我考虑使用“resolveComponentFactory”将组件生成到 ViewContainerRef 中。如果我用@ViewChild 调用我的视图元素,效果很好:

模板:

<div #myContainer></div>
Run Code Online (Sandbox Code Playgroud)

逻辑:

@ViewChild('myContainer', { read: ViewContainerRef } ) myContainer: ViewContainerRef;
private generatedComponent= this.componentFactoryResolver.resolveComponentFactory(componentDetail);
let my geojson = L.geoJSON(data, {
    onEachFeature: (feature, layer) => {
        layer.on({
            click: () => {
                this.myContainer.createComponent(this.generatedComponent);
            }
        })
    }
}).addTo(map);
Run Code Online (Sandbox Code Playgroud)

现在我想将我的组件直接生成到弹出窗口中。我想我需要在弹出窗口的内容中设置一个 ViewContainerRef。类似的东西:

@ViewChild('popup', { read: ViewContainerRef } ) …
Run Code Online (Sandbox Code Playgroud)

leaflet angular

8
推荐指数
2
解决办法
6669
查看次数

标签 统计

angular ×1

leaflet ×1