javascript - 将 ng-content 渲染为 html - Angular 2

Question

我的 API 正在返回 HTML 内容(我希望它返回 - 它必须返回)。我想在 Angular 2/7 中将此内容呈现为 HTML。

现在，我已经

<div class="card-container" [ngClass]="type === 'bot' ? 'white' : 'blue'">
    <div class="header" >
        <b>{{name}}</b> 
        {{date}}
    </div>
    <ng-content></ng-content>
</div>

这里的目标是将 ng-content 呈现为 HTML。

对于上下文，ng-content 是这样的测试日期:11 月 19 日星期一

这个组件叫做chat-c​​ard.component

它的父组件称为 chat-c​​ard-area.component

<div class="right-child">
    <app-chat-card type={{type}}>
        <ng-content></ng-content>
    </app-chat-card>
</div>

如果 chat-c​​ard-area 是简单的 chat.component，则父级具有

<div *ngFor="let message of messages">
    <app-chat-card-area type={{message.type}}>
    {{message.text}} // I want this to be rendered as html
    </app-chat-card-area>
</div>

知道如何做到这一点吗？

Answer 1

在此处使用 innerHTML 绑定(bind):-

<div *ngFor="let message of messages">
    <app-chat-card-area type={{message.type}}>
      <div [innerHTML]="message.text"></div> // Will render as HTML
    </app-chat-card-area>
</div>