在Angular2中动态插入组件

我有一种需要动态创建和插入组件的情况。在Angular2中动态插入组件

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

语法这样做看起来像这样：

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

在这种情况下popupContent或者是一个HTML的字符串或HTMLElement对象。

我想知道用Angular2 JS做这件事的最好方法是什么。

编辑：一个更好的问题是，鉴于小册子会处理弹出窗口，如果我要手动编写HTML（如使用小胡子或小胡子），它会是一种反模式。 lodash模板）而不是使用Angular组件。

来源

2016-06-01 NRaf

您可以使用类似

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

动态添加HTML。

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

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

请参阅创建组件，您可以使用ViewContainerRef.createComponent像Angular 2 dynamic tabs with user-click chosen components

来源

2016-06-01 05:52:41

不知道'innerHTML'如何适用于我的问题解释（可能缺少它）。我需要解决和处理绑定，组件等。主要问题是该元素不会直接添加到DOM上（因此，不能直接添加子元素，使用标记和循环添加元素的标准方式等不会真正应用），而是，需要交给Leaflet进行管理。看看'ViewContainerRef'链接，它不完全清楚它是如何应用的，但我会深入研究它。 – NRaf

我错过了“传单”参考。我不知道它需要什么。如果你需要Angular组件和指令被实例化和绑定解析，[[innerHTML] = ...'不是正确的工具。 'ViewContainerRef.createComponent（）'允许一些变化，但我需要更多关于你的（或传单）需求的细节。 –

在Angular2中动态插入组件

回答

相关问题