Angular 2-RC4 Dynamischer Inhalt wird geladen

Question

Momentan versuche ich, Leaflet in Angular 2-RC4 einzubauen. Ich habe mit dem folgenden Problem des dynamischen Ladens von HTML in popupContent von Flugblattmarkierungen konfrontiert.

In der übergeordneten Klasse I den folgenden Code haben:

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

Kinder Komponente:

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

} 

Wenn ich die html ich diese Fehler erhalten laufen:

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] 

I‘ m versuchen zu vermeiden, das DOM-Element über JQuery zu erhalten

getDynamicElement(name) 
{ 
    str = "<div><div>" + name + "<div></div>" 
    return $(str).get[0] 
} 

Gibt es einen besseren Weg, es in Angular 2 zu tun?

Answer 1

Dies sind zwei Tricks in Ihrem Code, 1 dynamische Last, 2, wie Sie mit jQuery ($)

Hier ist, wie ich dynamica Komponente aus string

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

}

erstellen Für weitere Details überprüfen hier https://github.com/Longfld/DynamicRouter_rc4/blob/master/app/MyRouterLink.ts

oder Demo hier http://plnkr.co/edit/diZgQ8wttafb4xE6ZUFv?p=preview

Für RC5 siehe hier: http://plnkr.co/edit/nm5m7N?p=preview