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（$）

以下是我如何从字符串

创建dynamica组件

[ts] 
Argument of type '(ValidatorFn | ((control: Control) => { "Please provide a valid email": boolean; }))[]' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[]'.
  Type '(ValidatorFn | ((control: Control) => { "Please provide a valid email": boolean; }))[]' is not assignable to type 'ValidatorFn[]'.
    Type 'ValidatorFn | ((control: Control) => { "Please provide a valid email": boolean; })' is not assignable to type 'ValidatorFn'.
      Type '(control: Control) => { "Please provide a valid email": boolean; }' is not assignable to type 'ValidatorFn'.
        Types of parameters 'control' and 'c' are incompatible.
          Type 'AbstractControl' is not assignable to type 'Control'.
            Property 'updateValue' is missing in type 'AbstractControl'.
import EmailValidator

}

有关详细信息，请点击此处 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

Angular 2-RC4动态内容加载

1 个答案: