![](/img/trans.png)
[英]How to spawn Angular 4 component inside a Leaflet marker's popup?
[英]angular component into leaflet popup
无法弄清楚如何将组件生成到传单弹出窗口中。 我尝试了两件事:
首先,将组件选择器集成到 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);
编辑:这是我如何将此解决方案转换为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);
}
});
这是一个有效的解决方案:
创建组件
component = this.resolver.resolveComponentFactory(PopupComponent).create(this.injector);
使用 NG 组件作为 HTML:
component.location.nativeElement
前任:
this.bindPopup(this.component.location.nativeElement);
在哪里:
记得添加“app.module.ts”:
entryComponents: [PopupComponent]
额外的
必须通知 Angular 有关“更改”的信息,请调用:
component.changeDetectorRef.detectChanges()
如果要在弹出窗口中使用输入字段:
DomEvent.disableClickPropagation(this.component.location.nativeElement);
:)
以下是我将此解决方案转换为 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);
}
});
@米格尔-德-马托斯
const component = this.resolver.resolveComponentFactory(MyComponent).create(this.injector);
component.instance.title = 'Super Title';
component.changeDetectorRef.detectChanges();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.