发生 angular2 操作时重新加载 html 对象标记

Question

我正在通过html对象标签将pdf加载到视图中。出于某种原因，每当 dom 中的其他任何地方发生 angular2 操作(鼠标输入、鼠标退出、单击(时，都会导致对象/pdf 重新加载。我注意到对象标签上的内部实例 ID 不断变化，但我无法控制。

<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

Answer 2

此外，

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