erstellen Sie dynamische anchorName/Komponenten mit ComponentResolver und ngFor in Angular2

Brauche ich zum erstellen von einzigartigen Anker-Namen/- Komponenten in einem ngFor Schleife, um es mit ComponentResolver.resolveComponent.

<div>
  <table>
    <tr *ng-for="#vIndex of vArr">
      <td *ng-for="#hIndex of hArr">
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
    </tr>
  </table>
</div>

den resultierenden html-Code sieht in etwa so aus:

<div>
  <table>
    <tr>
      <td>
        <div #uniqueanchorname0_0></div>
      </td>
      <td>
        <div #uniqueanchorname0_1></div>
      </td>
    </tr>
    <tr>
      <td>
        <div #uniqueanchorname1_0></div>
      </td>
      <td>
        <div #uniqueanchorname1_1></div>
      </td>
      <td>
        <div #uniqueanchorname1_2></div>
      </td>
    </tr>
  </table>
</div>

Mit, dass ich das DynamicComponentLoader wie:

loader.loadIntoLocation(responseDependentComponent, elementRef, 'uniqueAnchorName1_2');

den resultierenden HTML-Code nicht ersetzt, und die wird etwa so Aussehen:

<div>
  <table>
    <tr>
      <td>
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
      <td>
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
    </tr>
    <tr>
      <td>
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
      <td>
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
      <td>
        <div #uniqueanchorname{{vIndex}}_{{hIndex}}></div>
      </td>
    </tr>
  </table>
</div>

Wenn die Schaffung von einzigartigen Anker-Namen ist nicht möglich. Gibt es einen anderen Weg zum laden von Komponenten in einer bestimmten Position?

  • könnten Sie versuchen, etwas wie #{{'uniqueAnchorName' + vIndex + '_' + hIndex}}
  • Ich habe nicht wirklich verstanden, dein problem. Hat das funktioniert? Es trifft nicht zu? Ich habe es nicht ausprobiert, aber das einzige, was ich sehen kann, ist die Tatsache der Verwendung von Großbuchstaben in Ihrem Variablennamen. Wenn Sie schreiben uniqueAnchorName browser wird kleingeschrieben, es zu uniqueanchorname vor ng2 kompiliert.
  • Schnurrbart ({{xxx}})nicht bekommt, ersetzt in den Attributen, den resultierenden html-Code sieht immer noch wie #uniqueAnchorName{{vIndex}}_{{hIndex}}
  • thx für den Hinweis. Aber der Schnurrbart nicht ersetzt Parametern.
InformationsquelleAutor Thomas Frick | 2015-10-06
Schreibe einen Kommentar