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

时间:2017-01-25 13:09:37

标签: html angular ng-bootstrap

我已经编写了自己的表模块。用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>

如何解决?

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

所以应该是这样的:

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