Перезагрузка тега HTML-объекта при выполнении действия angular2

Я загружаю PDF в представление через тег объекта HTML. По какой-то причине в любое время в любом другом месте домена происходит действие angular2 (mouseenter, mouseout, click), что приводит к перезагрузке объекта /pdf. Я заметил, что internalI nstanceId продолжает меняться в теге объекта, но я не имею над ним никакого контроля.

<object type="application/pdf" width="100%" height="100%" [data]="cleanUrl(item.url)" id="pdf_content"></object>

Вот plunkr, который показывает, что происходит. Когда происходит угловое событие (наведение курсора на заголовок), это приводит к перезагрузке тега объекта.

https://plnkr.co/edit/sovRUOn79LTJRDhaellf?p=preview

Источник

1 ответ

Это было действительно интересно выяснить, привязки события: mouseentermouseleave вызвать обнаружение изменений DoCheck и по какой-то причине, что вызывает дезинфицирующее средство для запуска или это что-то еще, не уверен.

В любом случае я исправил это, переместив очистку в трубу:

@Pipe({ name: 'safeUrl'})
export class SafeUrlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    console.log(this.sanitized.bypassSecurityTrustHtml(value))
    return this.sanitized.bypassSecurityTrustResourceUrl(value);
  }
}

используйте это так: <object [data]="cleanUrl(item.url) | safeUrl"></object> посмотреть этот plnkr: https://plnkr.co/edit/10hzOzU31R7CgxJKQaYe?p=preview

Также эта проблема GitHub может быть связана: https://github.com/angular/angular/issues/7055

Источник

Также, если логика вашего компонента позволяет это, вы можете использовать changeDetection: ChangeDetectionStrategy.OnPush, чтобы не запускать его при каждом изменении.

Источник
Другие вопросы по тегам