I need to create unique Anchor Names/Components in a ngFor loop to use it with 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>
the resulting html should look something like that:
<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>
With that i can use the DynamicComponentLoader like:
loader.loadIntoLocation(responseDependentComponent, elementRef, 'uniqueAnchorName1_2');
the resulting HTML does not get replaced and will look something like:
<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>
If the creation of unique anchor names is not possible. Is there an other way to load components into a specific location?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…