动态使用createComponent时如何引用id答案

【问题标题】：How to reference id when dynamically using createComponent动态使用createComponent时如何引用id
【发布时间】：2017-07-09 17:46:54
【问题描述】：

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

【问题讨论】：

问题真的不清楚？你想达到什么目标？为什么需要 HTML 属性 ID？ id="{{ ad.id }}" 怎么了？
我想列出所有广告，如果用户点击一个标题（该 div 上有一个点击事件），那么我希望
为什么不把 person-host 指令放在另一个 div 上呢？ plnkr.co/edit/znzRCu0xzOuhouiBYUg6?p=preview
嗯......不知道这有什么帮助......问题是，如果我点击第一行的第二个项目，我想显示第一行和第二行之间的详细信息。

标签： angular dynamic-content

【解决方案1】：

你可以这样做

<div *ngFor="let ad of adList">
    <my-ad [ad]="ad"></my-ad>
</div>

在您放置的 my-ad 组件中

<template ad-host></template>

并将 ad.component 加载到 ad-host 占位符中。

【讨论】：

这可以工作..问题是我正在使用 md-card（材料设计）并且不想破解它。它也不符合语义：/
你在哪里使用 md-card？
您在哪里使用
问题是我需要注入到正确的元素中。现在它被注入到具有 ad-host 属性的第一个元素中。

【解决方案2】：

我的理解是对的，你想要这样的东西：

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

【讨论】：