Wie Angular2 RC1 über veränderte DOM wissen lassen

Question

Dies ist eigentlich eine Ausgliederung von here, mit einem viel einfacheren Anwendungsfall, obwohl. Es geht darum, Angular2 mitzuteilen, dass extern hinzugefügte DOM-Elemente mit Angular-Direktiven vorhanden sind. In diesem Fall füge ich eine neue Schaltfläche hinzu, deren On-Click-Ereignis niemals gebunden ist. Ich dachte, Zone würde automatisch Änderungen in den Vorlagen ihrer Komponenten erkennen, offensichtlich nicht. Ist jemand in der Lage, diesen Code ohne den immensen Overhead zu erstellen, eine neue Komponente für die Schaltfläche zu erstellen und über DynamicLoaderComponent zu laden?

Hinweis: Ich habe bereits NgZone und ChangeDetectorRef hinzugefügt, um damit herumzuspielen. Beides funktionierte nicht für mich. Hier

ist ein Link zum vollständigen Beispiel bei plunkr: plnkr.co/edit/hf180P6nkxXtJDusPdLb

Und das ist ein relevanter Ausschnitt aus der Komponente:

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 nicht über das DOM überhaupt nicht interessieren. Zone patcht nur asynchrone APIs wie addEventListener(), setTimeout(), ... und überprüft dann nur das Modell auf Änderungen.

Angular geht davon aus, dass es für das DOM zuständig ist. Das DOM wird von Angular aktualisiert, wenn sich das Modell ändert, nicht umgekehrt.

Es gibt keine Möglichkeit, Angular zum Erstellen von Komponenten oder Direktiven zum Anpassen von HTML oder zum Auflösen von Bindungen für dynamisch hinzugefügtes HTML zu verwenden. Angular tut dies nur für HTML, das statisch zur Vorlage einer Komponente hinzugefügt wird.

DynamicaComponentLoader (nicht weiterentwickelt) oder ViewContainerRef.createComponent() sind die Weg für das Hinzufügen von Komponenten dynamisch.

Sie Wrapper-Element verwenden können, die es einfach deklarativ hinzufügen dynamische Komponenten wie erklärt in Angular 2 dynamic tabs with user-click chosen components (enthält auch ein Plunker Beispiel für die neue ViewContainerRef.createComponent()