目前,我正在尝试将 Leaflet 合并到 Angular 2-RC4 中。我遇到了以下将 html 动态加载到传单标记的 popupContent 中的问题。
在父类中我有以下代码:
export class BeaconLayerComponent implements OnInit {
constructor(private resolver: ComponentResolver, private viewRef: ViewContainerRef) {}
createMultipleDynamicInstance(markers) {
markers.foreach((marker) => {
createDynamicInstance(marker);
}
}
createDynamicInstance() {
this.resolver.resolveComponent(BeaconPopupComponent).then((factory:ComponentFactory<BeaconPopupComponent>) => {
let popupComponentRef: ComponentRef<BeaconPopupComponent>;
popupComponentRef = this.viewRef.createComponent(factory);
popupComponentRef.instance.name = beaconJSON.name;
popupComponentRef.instance.afterViewCheckedEventEmitter.subscribe((popupInnerHTML: string) => {
//make use of the innerHTML
// ... <= Create the leaflet marker with innerHTML as popupContent
//After retrieving the HTML, destroy the element
popupComponentRef.destroy();
})
});
子组件:
import {Component, AfterContentInit, EventEmitter, AfterViewInit, AfterViewChecked, ElementRef} from "@angular/core";
@Component({
selector: 'beaconPopup',
template: `
<div>{{name}}</div>
`
})
export class BeaconPopupComponent implements AfterViewChecked {
constructor(private elementRef: ElementRef) {}
name:string;
public afterViewCheckedEventEmitter = new EventEmitter();
ngAfterViewChecked() {
console.log("ngAfterViewChecked()");
this.afterViewCheckedEventEmitter.emit(this.elementRef.nativeElement.innerHTML);
}
}
当我运行 html 时,出现以下错误:
2016-07-19 00:02:29.375 platform-browser.umd.js:1900 Error: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: 'Happening Beacon'
at ExpressionChangedAfterItHasBeenCheckedException.BaseException [as constructor]
我试图避免通过 JQuery 获取 DOM 元素
getDynamicElement(name)
{
str = "<div><div>" + name + "<div></div>"
return $(str).get[0]
}
在 Angular 2 中有更好的方法吗?
最佳答案
这是代码中的两个技巧,1 动态加载,2 如何使用 jQuery($)
这是我如何从字符串创建动态组件
compileToComponent(template1: string): Promise<ComponentFactory<any>> {
const metadata = new ComponentMetadata({
template: template1,
directives: ROUTER_DIRECTIVES
});
let decoratedCmp = Component(metadata)(class DynamicComponent { });
return this.resolver.resolveComponent(decoratedCmp);
}
欲了解更多详情,请查看此处 https://github.com/Longfld/DynamicRouter_rc4/blob/master/app/MyRouterLink.ts
或在此处演示 http://plnkr.co/edit/diZgQ8wttafb4xE6ZUFv?p=preview
对于 rc5,请参见此处:http://plnkr.co/edit/nm5m7N?p=preview
关于javascript - Angular 2-RC4 动态内容加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38442069/