时间戳

首页 > 解决方案 > 在角度 8 中从 index.html 向组件内注入动态 html

javascript - 在角度 8 中从 index.html 向组件内注入动态 html

问题描述

我正在开发一个网络应用程序。其中有玉兰作为CMS。我还是新来的，但我会解释这个场景。magnolia 提供了 index.html，其中包含组件的引用。但对于其中一些组件，它还提供了一些额外的 html 内容。此附加内容必须显示在特定组件的模板中。请参阅以下内容以获得更好的理解。（记住这是在 index.html 中）

<my-component>
<div> this division has to be shown inside the my component template.</div>
</my-component>

到目前为止，我已经尝试过以下方法。

  1. 尝试使用-这显然不起作用，因为我最近了解到角度不是根模板（index.html）的主人。所以 ng-content 永远不会起作用。如果我错了，请纠正我。
  2. 使用 shadow dom 视图封装。我不是这方面的专家，但是在组件模板中设置 viewencapsulation = shadowdom 并定义插槽可以满足我的目的。这种方法的唯一问题是这个影子元素的范围。它将位于具有自己范围的影子根内部，因此不会在其中应用全局样式。我必须为每个这样的组件导入所有全局 css，这使得 main.js 的大小变得疯狂。

如果这个问题有更好的或其他的解决方案，有人可以建议我吗？

标签： javascriptangularshadow-dommagnoliaangular-elements

解决方案

您是否尝试过为该组件使用 Input() 值？

  1. 索引.html

<my-comp [myInputs]="'My Input HTML <b>Content</b>'">

  1. 你的接收组件…</li> 
<div [innerHTML]="myInputs"></div>

推荐阅读