javascript - Angular 2-RC4 动态内容加载

Question

目前，我正在尝试将 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 中有更好的方法吗？

Answer 1

这是代码中的两个技巧，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