Angular 2 dynamic `template Variablenname`s für DynamicComponentLoader?

TL;DR:

Erklärung:

Ich bin dynamisch erstellen Eckig 2-Komponenten mithilfe DynamicComponentLoader's loadIntoLocation () - Funktion.

Den Ort zum einfügen der Komponente generiert durch diese Funktion wird bestimmt durch seine anchorName parameter, die nimmt dir einen
Template Variable Name (als string).

So, in dem Beispiel, das Sie verwenden <div #child></div> in der Vorlage, dann pass 'child'. Welche gut funktioniert.

Jedoch, anstatt generierte link-Komponenten zu einem element mit variablem Namen hartcodiert in die Vorlage, ich möchte in der Lage sein, sagen, fügen Sie diese in ein variable-sized-Liste.

Nun, die NgFor Seite zeigt, haben Sie Zugriff auf eine index-variable: <li *ng-for="#item of items; #i = index">...</li>. So würde es funktionieren, wenn ich könnte, ordnen Sie die Elemente der Liste wie template-Variablen-Namen verwendet, die auf diesem index oder ähnliches, d.h. #child1#child2 usw.

So, ich bin geneigt zu versuchen <div #{{foo}}></div> eine app, mit der variable foo als "child". Ich habe Probleme beim Debuggen, da front-end nicht wirklich zeigen, diese template-Variablen-Namen in den DOM, aber es scheint, dass diese dynamische Zuweisung fehlschlägt, wodurch ein Fehler "Could not find variable ...".

Könnte es irgendeinen Weg, das zu tun, was ich will? Oder sogar auf anzeigen zugeordnet template variable names vom browser zum Debuggen?

InformationsquelleAutor der Frage Tycho | 2015-11-29

  1. 13

    Das problem mit diesem Ansatz ist Sie nicht Variablennamen dynamisch zu generieren.

    Ein weiterer möglicher Ansatz ist die Nutzung von loadAsRootdie statt mit einem Variablennamen, verwendet eine id welche enthalten können einen dynamischen Namen.

    //This will generate dynamically the id value
template: `
  <div *ng-for="#idx of data">
    <div id="dynamicid_{{idx}}">Dynamic</div>
  </div>`

    Dann legen Sie die Liste aus, die Sie möchten, Durchlaufen

    this.data = [1,2,3,4,5,6];

for(var i = 0; i < this.data.length; i++) {
  //Third argument is the injector that I'm not using, so I just nulled it
  dynamicComponentLoader.loadAsRoot(DynamicComponent, '#dynamicid_'+this.data[i], null);
}

    Hier ist die plnkr mit einem Beispiel arbeiten.

    Ich hoffe, es hilft.

    InformationsquelleAutor der Antwort Eric Martinez

  2. 1

    Nach der Suche rund um für ähnliche Antworten, dämmerte es mir, dass die Standard-Lösung ist eigentlich sehr standard: extrahieren Sie eine Komponente, wo Sie können hartcodieren Ihre template-Variablen, und generieren Sie so viele Instanzen dieser Komponente, wie Sie mit der *ngFor Richtlinie.

    Ich verstehen, es kann sein Anliegen über die Leistung, und ich weiß nicht genug darüber, um zu kommentieren oder so (wer weiß, vielleicht am Ende schneller), aber IMO sollte es auf jeden Fall die erste Lösung vorgestellt.

    Und die DynamicComponentLoader wissen in Eric Martinez Antwort scheint Weg zu sein von Winkel-5 sowieso (konnte ihn nicht finden in der Dokumentation).

    InformationsquelleAutor der Antwort Arnaud P

Schreibe einen Kommentar