从 index.html in angular 8

Question

我正在开发 web 应用程序。 其中有玉兰作为CMS。 我还是新来的，但我会解释这个场景。 magnolia 提供了索引。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-content 永远不会起作用。 如果我错了，请纠正我。
2. 使用 shadow dom 视图封装。 我不是这方面的专家，但是在组件模板中设置 viewencapsulation = shadowdom 并定义插槽可以满足我的目的。 这种方法的唯一问题是这个阴影元素的 scope。 它将位于具有自己的 scope 的影子根内部，因此在其内部没有应用全局 styles。 我必须为每个此类组件导入所有全局 css，这使得 main.js go 的大小变得疯狂。

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

Answer 1

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

1. 索引.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中。