Question

我有一个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卡中。

感谢您的帮助。谢谢

Answer 1

您可以使用innerHtml：

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

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

角材料垫插值法添加html格式的字符串错误

2 个答案: