Angular 6从HTMLTemplateElement创建HTMLElement

Question

我们尝试在Angular中使用由聚合物创建的自定义元素。

我们的目标是定义一个传递给自定义元素的HTML模板。 custom元素基于此模板生成HTML。 Angular无法正确传递HTML模板。角度似乎以不同的方式呈现HTML模板。

使用纯Javascript的简单示例：

https://stackblitz.com/edit/js-svh54x?file=index.js

innerHTML untouched

Anuglar 6中的一个简单示例：

https://stackblitz.com/edit/angular-zryvwi?file=src%2Fapp%2Fapp.component.ts

Removed innerHTML

为什么角度删除了HTMLTemplateElement的innerHTML？

Answer 1

Angular与DOM抽象有关。换句话说，您永远不要（或很少）使用Angular应用程序中的低级JavaScript API操作HTML元素。

快速阅读文档将帮助您理解Angular要做的事情就是创建一个组件并将其实例化。

Answer 2

使用

<template id="testTemplate" [innerHTML]="'<div>Test 123!!!</div>'"></template>

代替

<template id="testTemplate">
    <div>Test 123!!!</div>
</template>

解决了我的问题。