如何在动态使用createComponent时引用id

时间:2017-02-20 12:31:52

标签: angular dynamic-content

我已经按照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]选择器。

2 个答案:

答案 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:)