3

我正在通过 html 对象标签将 pdf 加载到视图中。由于某种原因，任何时候在 dom 中的其他任何地方发生 angular2 操作（mouseenter、mouseout、单击）都会导致对象/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

4

2 回答 2

5

弄清楚事件绑定真的很有趣：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

于 2017-04-08T00:56:59.743 回答
0

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

于 2020-08-11T08:17:37.547 回答