2

组件是否可以接收在开始标签和结束标签之间传递给它的内容并将输入直接分配给innerHTML接收模板内部？

我有这样的string输入：

public content: string =
  '<div class="row">' +
  '  <div class="col">' +
  '    <h1>Friendly greetings!</h1>' +
  '    <p>' +
  '      This is my homepage..' +
  '    </p>' +
  '  </div>' +
  '</div>';

并将它放在我的组件中，如下所示：

<app-content>{{ content }}</app-content>

在里面app-content我可以ng-content在模板中使用来投影输入内容。由于输入是 astring我只能看到 a string，因此它描述的 HTML 元素不会呈现。

我试图通过 注入ElementRef并访问文本节点this.elementRef.nativeElement.textContent，但必须先渲染内容才能以这种方式访问​​它。

当然，我可以ng-content像这样隐藏内容生成：

<div style="display: none">
  <ng-content></ng-content>
</div>

然后得到textContent一个变量（例如content）并像这样设置它：

<div [outerHTML]="content"></div>

但这对我来说似乎很老套。

StackBlitz 项目：get-input-of-ng-content-directly

我错过了什么吗？

我想在模板中做这样的事情：<div [outerHTML]="incoming ng-content stuff"></div>

或者至少在组件构造函数中注入内容并将其设置为变量，但不首先渲染内容只是为了隐藏它。

4

1 回答 1

0

我会说你有两个选择：

1.） @Input()接收您的content上述内容然后呈现您提到content的字段。innerHTML所以像

<app-content [content]="content"></app-content>

然后你可以content Input像上面一样渲染你<div [innerHTML]=...

2.) 或者您可以<ng-content>在<app-content>HTML 文件中使用，然后执行以下操作：

<app-content>
  <div [innerHTML]="content"></div>
</app-content>

但是第二个选项可能假设<app-content>不是您的 Angular 应用程序的根元素。

于 2020-11-08T01:41:16.043 回答