将 ng-content 的字符串输入直接渲染为 HTML

Question

组件是否可以接收在开始标签和结束标签之间传递给它的内容，并将输入直接分配给接收模板内的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来投影输入的内容。由于输入是string，我只能看到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>

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

Answer 1

我会说你有两个选择：

1.) @Input() 字段接收上面的content，然后将content 呈现为innerHTML，就像你提到的那样。所以像

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

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

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

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

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