在Angular2中动态插入组件

Question

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

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

这样做的语法如下：

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

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

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

编辑：一个猜测是一个更好的问题，因为无论如何，传单将处理弹出窗口，如果我要手动编写HTML（例如使用小胡子或lodash模板）而不是它，那将是一种反模式吗？使用Angular组件。

Answer 1

您可以使用类似

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

动态添加HTML。

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

另请参见在RC.1中，无法使用绑定语法添加某些样式

要创建组件，您可以使用ViewContainerRef.createComponent如Angular 2动态选项卡中所述，并通过用户单击所选组件