角成分进入传单弹出窗口 [英] angular component into leaflet popup

问题描述

无法弄清楚如何在传单弹出窗口中生成组件. 我已经尝试了两件事:

can't figure out how to generate a component into a leaflet popup. I've tried two things:

首先，将组件选择器集成到html中，但是看起来好像angular无法编译它:

First, integrate the component selector into the html but it looks as if angular does not compile it:

    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);

当我单击地图上的一个点时，弹出窗口为空.

When i click on a point on the map, the popup is empty.

然后，我考虑使用"resolveComponentFactory"将组件生成到ViewContainerRef中.如果我使用@ViewChild调用视图元素，则效果很好:

Then i considered using "resolveComponentFactory" to generate the component into a ViewContainerRef. It works well if i call an element of my view with @ViewChild:

模板:

<div #myContainer></div>

逻辑:

@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);

现在，我想直接将我的组件生成到弹出窗口中.我想我需要将ViewContainerRef设置到弹出窗口的内容中.像这样的东西:

Now i would like to generate my component directly into a popup. I think i need to set a ViewContainerRef into the content of my popup. Something like that:

@ViewChild('popup', { read: ViewContainerRef } ) popup: ViewContainerRef;
private generatedComponent= this.componentFactoryResolver.resolveComponentFactory(componentDetail);
let my geojson = L.geoJSON(data, {
    onEachFeature: (feature, layer) => {
        let popup = L.popup().setContent('<div #popup></div>');
        layer.on({
            click: () => {
                layer.bindPopup(popup);
                this.popup.createComponent(this.generatedComponent);
            }
        })
    }
}).addTo(map);

这是我将解决方案转换为leaflet.js的方式

Here is how i transposed this solution to leaflet.js

    let geojson = L.geoJSON(data, {
  style: () => defaultStyle,
  onEachFeature: (feature, layer) => {
    let popup = L.popup();
    layer.on({
      click: () => {
        this.zone.run( () => {

          if(this.componentRef){
            this.componentRef.destroy();
          }
          const compFactory = this.componentFactoryResolver.resolveComponentFactory(componentDetailmponent);
          this.componentRef = compFactory.create(this.injector);

          if (this.appRef['attachView']) { // since 2.3.0
           this.appRef['attachView'](this.componentRef.hostView);
           this.componentRef .onDestroy(() => {
             this.appRef['detachView'](this.componentRef.hostView);
          });
         } else {
          this.appRef['registerChangeDetector'](this.componentRef.changeDetectorRef);
          this.componentRef.onDestroy(() => {
            this.appRef['unregisterChangeDetector'](this.componentRef.changeDetectorRef);
          });
          }

          let div = document.createElement('div');
          div.appendChild(this.componentRef.location.nativeElement);
          popup.setContent(div);
        }
      )

      }
    });
    layer.bindPopup(popup);
  }
});

推荐答案

这是一个可行的解决方案:

this is a working solution:

创建组件

component = this.resolver.resolveComponentFactory(PopupComponent).create(this.injector);

使用NG组件作为HTML:

Use NG component as HTML:

component.location.nativeElement

例如:

this.bindPopup(this.component.location.nativeElement);

位置:

• 解析器:ComponentFactoryResolver->来自"@ angular/core"；
• 注入器:"@ angular/core"中的注入器->；

记住要添加'app.module.ts':

Remember to add 'app.module.ts':

entryComponents: [PopupComponent]

额外

• 必须通知Angular有关更改"的信息，请致电:

• Angular must be notified about "change", call:

component.changeDetectorRef.detectChanges()

component.changeDetectorRef.detectChanges()

如果要在弹出窗口中使用输入字段:

If you want to use input fields in the popup:

DomEvent.disableClickPropagation(this.component.location.nativeElement);

DomEvent.disableClickPropagation(this.component.location.nativeElement);

:)

这篇关于角成分进入传单弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！