Question

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

首先，将组件选择器集成到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);

当我点击地图上的某个点时，弹出窗口为空。

然后我考虑使用“resolveComponentFactory”将组件生成到ViewContainerRef中。如果我使用@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设置为弹出窗口的内容。这样的事情：

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

编辑：以下是我将此solution转换为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);
  }
});

Answer 1

以下是我将此solution转换为leaflet.js的方法：

let geojson = L.geoJSON(data, {
 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);
}
});

Answer 2

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

创建组件

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

使用NG组件作为HTML：

component.location.nativeElement

例如：

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

位置：

解析器：ComponentFactoryResolver->来自“ @ angular / core”；
注入器：“ @ angular / core”中的注入器->；

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

entryComponents: [PopupComponent]

额外

必须通知Angular有关“更改”，请致电：

component.changeDetectorRef.detectChanges（）
如果要在弹出窗口中使用输入字段：

DomEvent.disableClickPropagation（this.component.location.nativeElement）;

：）

Answer 3

@ miguel-de-matos

 const component = this.resolver.resolveComponentFactory(MyComponent).create(this.injector);
 component.instance.title = 'Super Title';
 component.changeDetectorRef.detectChanges();

小角成分进入小叶弹出窗口

3 个答案: