angular2 动作发生时重新加载 Html 对象标签

Question

我正在通过 html 对象标签将 pdf 加载到视图中。出于某种原因，无论何时在 dom 中的其他任何位置发生 angular2 操作（鼠标输入、鼠标移出、单击），都会导致对象/pdf 重新加载。我注意到 internalInstanceId 在对象标签上不断变化，但我无法控制。

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

这是一个显示正在发生的事情的plunkr。当一个角度事件发生（鼠标悬停在标题之外）时，它会导致对象标签重新加载。

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