Angular Material Mat-Card Interpolation 添加 html 格式的字符串错误答案

【问题标题】：Angular Material Mat-Card Interpolation to add html formatted string errorAngular Material Mat-Card Interpolation 添加 html 格式的字符串错误
【发布时间】：2019-09-12 11:31:20
【问题描述】：

我有一个 Angular Material Mat-Card，我想在其中添加插值以将内容字符串添加到 mat-card-content。

以下作品没有插值

 <mat-card-content>
            <p>Guidelines.</p>
            <p>Click on the folliwng link for additional information</p>
            <a href="http://mySite/documents/guidances.docx">http://mySite/documents/guidances.docx</a>
        </mat-card-content>

带有工作链接的渲染页面

内容将来自网络服务，不再是静态页面。现在我插入内容如下

<mat-card>
                        **<mat-card-content>{{message.content}}</mat-card-content>**
                    </mat-card>

hmtl 页面呈现时，不会对字符串进行任何 html 格式设置。

看起来像这样

<p>Guidelines.</p><p>UClick on the folliwng link for additional information</p><a href="http://mySite/documents/guidances.docx">http://mySite/documents/guidances.docx</a>

它只是将 html 代码粘贴到 amt-card 中。

感谢任何帮助。谢谢

【问题讨论】：

这样使用 - <div [innerHTML]="displayString"></div>。插值不解析 html。

标签： angular angular-material

【解决方案1】：

你可以使用innerHtml：

<mat-card-content>
 <div [innerHTML]="message.content"></div>
</mat-card-content>

【讨论】：

【解决方案2】：

您可以将内容包装在 div 中并使用 innerHtml 属性显示它，如下所示：

<mat-card>
   <mat-card-content><div [innerHtml]="message.content"></div></mat-card-content>
</mat-card>

注意：您应该使用 DomSanitizer 清理控制器中的输入（在您的情况下为 message.content）

例如：

import { DomSanitizer } from '@angular/platform-browser';
import { SecurityContext } from '@angular/core';

constructor(private sanitizer: DomSanitizer){}

...

message.content = this.sanitizer.sanitize(SecurityContext.HTML, value); // `value` is the value being assigned to `message.content`

【讨论】：