在angular 8中从index.html向组件内部注入动态html

Question

我正在开发一个web应用程序。以木兰为CMS。我还是新来的，但我会解释一下情况。木兰花提供了index.html，其中有组件的引用。但对于其中一些组件，它还提供了一些额外的html内容。这些附加内容必须显示在特定组件的模板中。请参阅以下内容以更好地理解。(记住这在index.html中(

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

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

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

有人能告诉我这个问题是否有更好的或其他的解决方案吗？

Answer 1

您尝试过为该组件使用Input((值吗？

1. index.html

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

2. 您的接收组件

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

Answer 2

在我这边，我在要放置动态内容的组件中使用<ng-content></ng-content>。

例如：

<app-help-tool>
<span i18n="@@pictoTable_helpPictoList">Click on a picto to see its description.</span>
</app-help-tool>

在HelpToolComponent.ts:中

<div 
class="help_content" 
*ngIf="this.isVisible && this.helpService.isHelpOn()" 
[@showHideHelp]
(click)="showHideHelp()"
>
<ng-content></ng-content>
</div>

结果是将span内容放入组件的div中。