变量中的组件选择器 - 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或其他）并期望指令会被选择和应用。 以这种方式使 Angular 工作需要将整个编译器传送到浏览器，并且会破坏可以通过提前 (AOT) 编译完成的所有伟大优化的全部目的。

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

Answer 2

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

所以应该是这样的：

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