Как сообщить Angular2 RC1 об измененном DOM

Question

Это на самом деле побочный эффект, с гораздо более простым вариантом использования. Речь идет о том, как сообщить Angular2, что есть внешние добавленные элементы DOM, содержащие директивы Angular. В этом случае я добавляю новую кнопку щелчка, событие которой при нажатии никогда не связывается. Похоже, что Zone автоматически обнаружит любые изменения в шаблонах их компонентов, очевидно, это не так. Кто-нибудь может заставить этот код работать без огромных накладных расходов на создание нового компонента для кнопки и загрузить его через DynamicLoaderComponent?

Примечание: я уже добавил NgZone а также ChangeDetectorRef поиграть с. Ни один не работал для меня.

Вот ссылка на полный пример на plunkr: http://plnkr.co/edit/hf180P6nkxXtJDusPdLb

И это соответствующая выдержка из компонента:

import {Component, AfterViewInit, ChangeDetectorRef, NgZone, Renderer} from '@angular/core'

@Component({
    selector: 'my-app',
providers: [],
template: `
<div>
<p><button on-click="clickMe()">This works</button></p>

<div id="insert-here"></div>

</div>
`,
directives: []
})
export class App implements AfterViewInit {
constructor(private ref:ChangeDetectorRef, private ngZone:NgZone, private renderer:Renderer) {

}

clickMe() {
alert("Yay, it works");
}

ngAfterViewInit() {
    let newButton = document.createElement("button");
    newButton.setAttribute("on-click","clickMe()");
    let textNode = document.createTextNode("This does not");
    newButton.appendChild(textNode);
    document.getElementById("insert-here").appendChild(newButton);

    // please make my button work:
    this.ref.detectChanges();
}

}

Answer 1

Zone совершенно не заботится о DOM. Зона только исправляет асинхронные API, такие как addEventListener(), setTimeout(),... а затем проверяет только модель на наличие изменений.

Angular предполагает, что он отвечает за DOM. DOM обновляется Angular при изменении модели, а не наоборот.

Нет никакого способа заставить Angular создавать компоненты или директивы для соответствия HTML или разрешать привязки для HTML, добавляемого динамически. Angular делает это только для HTML, добавляемого статически в шаблон компонента.

DynamicaComponentLoader (устарело) или ViewContainerRef.createComponent() способ динамически добавлять компоненты.

Вы можете использовать элемент-обертку, который упрощает декларативное добавление динамических компонентов, как объяснено в динамических вкладках Angular 2 с выбранными пользователем компонентами (также содержит пример Plunker для нового ViewContainerRef.createComponent()