Hinzufügen neuer Komponente Element zu DOM in Angular 2 zur Laufzeit rendern nicht die Komponente

Ich versuche dynamisch (zur Laufzeit) neue Knoten im DOM hinzuzufügen. Die neuen Knoten sind grundsätzlich die Komponentenselektoren. Das Problem ist, dass der Inhalt der Komponente nicht gerendert wird, so dass das Ergebnis nur leere HTML-Tags hat.Hinzufügen neuer Komponente Element zu DOM in Angular 2 zur Laufzeit rendern nicht die Komponente

Ich benutze Angular 2.0 Documentation Beispiel und modifizierte es ein wenig, nur um den Fall zu zeigen.

Here is the plunker

Alles, was ich tun, um die Code wiederverwenden und wenn ich auf den Körper klicken, um neue Umsatzsteuerelemente zu erstellen. Offensichtlich funktioniert es nicht.

Dies ist das neue Skript-Element, das ich oben auf body hinzugefügt habe.

<script> 
    function add(){ 
    var element = document.createElement('sales-tax'); 
    document.getElementsByTagName("my-app")[0].appendChild(element); 
    } 
</script>

und die Funktion wird aufgerufen, sobald ich auf den Körper klicke.

<body onclick="add()"> 
    <my-app>Loading...</my-app> 
</body>

Dies ist das Ergebnis. Wie Sie sehen, ist die Umsatzsteuer, die der Vorlage vor Laufzeit hinzugefügt wurde, gerendert, aber die, die ich zur Laufzeit hinzufüge, sind leer.

Quelle

2016-05-20 Tek

ich einen anderen Weg gehen würde. Da Sie mehrere Umsatzsteuerelemente nebeneinander haben, warum nicht eine Liste erstellen und nur neue SalesTax-Instanzen hinzufügen? Wo gehört die Umsatzsteuer?Oder testet ihr wirklich nur, wie man Elemente wiederholt? Siehe [* ngFor] (https://angular.io/docs/ts/latest/api/common/NgFor-directive.html) – rinukkusu

das Problem ist, dass ich Elemente dynamisch hinzufügen möchte. Es geht nicht um Elemente zu wiederholen – Tek

Sie Machen Sie sich immer noch einen Knopf, wo immer Sie wollen, und nutzen Sie injizierbare Dienste, um Ihre Daten zu speichern. (Gewähren Sie dies innerhalb einer Angular-Komponente) – rinukkusu

createComponent() Version: Plunker

this.resolver.resolveComponent(HeroListComponent).then((factory:ComponentFactory<any>) => { 
     this.cmpRef = this.theBody.createComponent(factory) 
    });

beta.17 (veraltet) Version mit .loadNextToLocation(): Plunker(deprecated)

addCmp(){ 
    console.log('adding'); 
    this.dcl.loadNextToLocation(HeroListComponent, this.theBody); 
    }

Sie sind nicht Erstellen einer Komponente Sie erstellen nur eine html Element und Anhängen an das DOM, das zufällig denselben Namen hat e mit einem Komponentenselektor.

Um zu erreichen, was Sie wollen, müssen Sie DynamicComponentLoader verwenden.

Quelle

2016-05-20 09:45:16 echonax

Können Sie in diesem Fall ein Beispiel geben, wie Sie das verwenden? – rinukkusu

nur versuchen, es zu implementieren .. – Tek

Nun, es ist definitiv ein Schritt zu dem, was ich versuche zu tun ... Ich muss nur auf meine Bedürfnisse zwicken. Danke echonyx;) – Tek

Angular machen den dom interanlly tatsächlichen DOM zu erzeugen, und binden sich Zone.js verwenden, welches nur in eine Richtung, Änderungen an DOM werden nicht erkannt.
Winkel erkennt nur eine Änderung, wenn es innerhalb des Bereichs Zone.js ausgeführt wird.
Dann gibt es andere interanl Bindings und Generierungsverfahren, um eine Komponente tatsächlich arbeiten und binden mit Rest der App.
zu erreichen, was Sie versuchen zu tun, werden Sie DynamicComponetLoader verwenden als @echonax erwähnt, aber da es jetzt veraltet ist, sollten Sie ViewContainerRef.createComponent() stattdessen verwenden.

Für implementaion siehe THIS Answer oder @ Gunter PLUNKER (Hoffnung, die er hat nichts dagegen.)

Quelle

2016-05-20 09:57:11

Hinzufügen neuer Komponente Element zu DOM in Angular 2 zur Laufzeit rendern nicht die Komponente

Antwort

Verwandte Themen