在Angular2中动态插入组件

Question

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

确切的情况是在Leaflet中向地图添加标记。

这样做的语法如下：

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

在这种情况下，popupContent可以是HTML字符串或HTMLElement对象。

我想知道使用Angular2做到这一点的最佳方法是什么。

编辑： 猜测一个更好的问题是，假设传单无论如何都将处理弹出窗口，如果我手动编写HTML（例如，使用小胡子或lodash模板）而不是使用角度组件。

Answer 1

您可以使用类似

的内容

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

动态添加HTML。

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

另见In RC.1 some styles can't be added using binding syntax

要创建组件，您可以使用Angular 2 dynamic tabs with user-click chosen components

中所述的ViewContainerRef.createComponent