将内容呈现为 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 日，星期一

这个组件叫做聊天-card.component

它的父级称为 chat-card-area.component

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

如果 chat-card-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绑定为：-

<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>

将内容呈现为 html - Angular 2

Rendering ng-content as html - Angular 2

javascript

angular

angular2-template

angular2-directives