Угловая 2-RC4 динамическая загрузка контента

javascript jquery angularjs

177 просмотра

1 ответ

46 Репутация автора

В настоящее время я пытаюсь включить 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] 

Я пытаюсь избежать получения элемента DOM через JQuery

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

Есть ли лучший способ сделать это в Angular 2?

Автор: Roland Источник Размещён: 18.07.2016 04:47

Ответы (1)


0 плюса

727 Репутация автора

Это два трюка внутри вашего кода, 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

Автор: Long Field Размещён: 30.08.2016 10:51
Вопросы из категории :
32x32