时间戳

首页 > 解决方案 > “SafeValue 必须使用 [property]=binding:” Angular 中的消息

angular - “SafeValue 必须使用 [property]=binding:” Angular 中的消息

问题描述

我有一个定义如下的 html 对象（父对象）：

<app-new-message [message]="msg.Htmltext></app-new-message>

在子对象中，当我使用在我定义的父对象中定义的消息时：

@Input() set message(value: string){
    if (value != ''){
      this.newMessage.message = '\n\n\n' + value;
    }
  }

但是当我执行应用程序时，我会在显示消息时在子对象中收到此消息：

SafeValue 必须使用 [property]=binding: "text message"

有什么帮助可以避免这个警告信息吗？

提前谢谢你。

标签： angulartypescript

解决方案

问题是您传递的字符串包含 html 标签。

Angular 会发出这个警告/错误，因为这些标签可能是危险的并被攻击者插入。

网络链接也是如此，如果您之前没有清理它们，Angular 将阻止它们。

在此处阅读更多信息：https ://angular.io/api/platform-b​​rowser/DomSanitizer

要修复警告，首先在您的组件/服务中注入 DomSanitizer：

constructor(private readonly _sanitizer: DomSanitizer){}

然后清理值：

public safeValue: SafeHtml;
this.safeValue = this._sanitizer.bypassSecurityTrustHtml(this.msg.Htmltext);

并将 safeValue 传递给另一个组件：

<app-new-message [message]="safeValue"></app-new-message>

您可以编写一个为您执行此操作的管道：

@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private readonly _sanitizer: DomSanitizer) { }

  public transform(html: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(html);
  }
}

用法：

 <app-new-message [message]="msg.Htmltext | safeHtml"></app-new-message>

推荐阅读