变量中的组件选择器 - Angular 2

Question

我已经编写了自己的表模块。用HTML代码调用它看起来像这样：

<my-table [data]="variableWithArr"></my-table>

现在，正在显示非常漂亮的表格。凉。但是，如果我想在某些表格中有进度条怎么办？我认为我可以将带有组件选择器的HTML代码作为值，例如bootstrap progressBar，如下所示：

for(let record of variableWithArr) {
    record[0] = '<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>';
}

不幸的是，Angular只显示一个HTML代码，但不会把它解释为组件选择器，所以我在DOM中收到类似的东西：

<td><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></td>

如何解决？

Answer 1

这不是Angular的工作方式 - 您不能插入任意HTML（innerHTML或其他方式），并期望获取指令＆amp;应用。以这种方式使Angular工作需要将整个编译器运送到浏览器，并且会破坏可以通过提前（AOT）编译完成的所有大优化的全部目的。

TL;博士;不，你不能这样做，这与ng-bootstrap项目无关，而是与Angular背后的设计决策有关。

Answer 2

通过查看docs您需要使用属性[innerHTML]，但要明确只在信任代码时才使用它！

所以应该是这样的：

<td [innerHTML]="record"></td>