我已经按照https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html#!#dynamic-loading上的教程进行了操作,并且工作正常。
但是现在我需要主机元素在* ngFor中,我无法弄清楚如何引用唯一的ID ..?
<div fxFlex="50%" fxFlex.gt-sm="33%" fxFlex.gt-md="20%" *ngFor="let ad of adList">
<div>{{ad.title}}</div>
<template ad-host id="{{ ad.id }}"></template>
</div>
编辑: 为了更好地说明我创建了一个plunkr: http://plnkr.co/edit/D1q7Al60m4UK1weRlcmQ?p=preview
所以我想要实现的是当你点击名字时。 更多信息应显示在下方。
现在它只找到第一个[person-host]选择器。
答案 0 :(得分:0)
您可以通过以下方式执行此操作
<div *ngFor="let ad of adList">
<my-ad [ad]="ad"></my-ad>
</div>
在我的广告组件中放置
<template ad-host></template>
并将ad.component加载到广告主机占位符。
答案 1 :(得分:0)
据我所知,你想要这样的事情:
<div fxFlex="50%" fxFlex.gt-sm="33%" fxFlex.gt-md="20%" *ngFor="let ad of adList">
<div (click)="ad.show = true;">{{ad.title}}</div>
<template [ngIf]="ad.show" ad-host id="{{ ad.id }}"></template>
</div>
您应该使用angulars工具箱而不是任何js-id-reference-selectors:)