在发生angular2操作时重新加载Html object标记

Question

我通过html object标签将一个pdf文件加载到视图中。由于某些原因，任何时候发生angular2操作(鼠标输入、鼠标输出、单击)都会导致对象/pdf重新加载。我注意到object标签上的internalInstanceId一直在变化，但我无法控制。

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

这是一个显示正在发生的事情的图。当一个角度事件发生时(鼠标移到标题上和标题外)，它会导致对象标签重新加载。

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

Answer 1

这真的很有趣，弄清楚事件绑定：mouseenter mouseleave触发一个变更检测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

Answer 2

此外，如果您的组件逻辑允许，您可以使用changeDetection: ChangeDetectionStrategy.OnPush来避免在每次更改时触发它。