javascript - 在 Angular2 中动态插入组件

Question

我遇到了需要动态创建和插入组件的情况。

确切的情况是在Leaflet内的 map 上添加标记。

执行此操作的语法如下所示:

L.marker(latLng, {title: someTitle, icon: icon}).addTo(this.map).bindPopup(popupContent);

在本例中，popupContent 是 HTML 字符串或 HTMLElement 对象。

我想知道使用 Angular2 实现此目的的最佳方法是什么。

编辑:一个更好的问题是，考虑到传单无论如何都会处理弹出窗口，如果我手动编写 HTML(例如使用 Mustache 或 Lodash 模板)而不是使用 Angular 分量。

Answer 1

你可以使用类似的东西

   <div [innerHTML]="popupContent"></div>

动态添加 HTML。

Angular 不会处理 popupContent，即使选择器匹配，也不会解析任何绑定(bind)，也不会实例化任何组件或指令。

另请参阅In RC.1 some styles can't be added using binding syntax

要创建组件，您可以使用ViewContainerRef.createComponent，如 Angular 2 dynamic tabs with user-click chosen components 中所述。