"SafeValue должно использовать [property] = binding:" сообщение в Angular

Question

У меня есть 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"

Любая помощь, чтобы избежать этого предупреждения?

Спасибо заранее.

Answer 1

Проблема в том, что передаваемая вами строка содержит html тегов.

Angular выдаст это предупреждение / ошибку, поскольку эти теги могут быть опасны и вставлены злоумышленником.

То же самое относится и к веб-ссылкам, Angular будет блокировать их, если вы ранее не выполняли их санитарную обработку.

Подробнее об этом здесь: https://angular.io/api/platform-browser/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>