Angular绑定元素属性时如何实现绑定方法仅调用一次

Angular变更检测机制默认会在每一次检测周期中，重新执行模板里所有绑定的方法，用返回值比对视图是否需要更新。
把returnEncodedLink()直接绑定到<object>的[data]属性上时，只要页面触发变更检测（包括鼠标事件、接口响应、定时器、其他组件状态更新等任意场景），该方法就会被重复调用。哪怕返回值指向同一个PDF文件，<object>标签接收到新的URL字符串都会重新加载资源，最终导致PDF查看器持续闪烁。

不要在模板属性绑定中直接调用返回资源地址的方法，遵循Angular模板绑定最佳实践，将方法返回值提前缓存为组件属性，仅在需要更新PDF地址时才重新执行方法赋值，模板直接绑定固定属性即可。

具体实现步骤 #

• 在组件类中声明专门存储PDF地址的属性，在组件初始化（或PDF源确实需要更新的时机）只调用一次returnEncodedLink()完成赋值：

import { Component, OnInit, SafeResourceUrl } from '@angular/core';

@Component({
  // 组件原有配置保持不变
})
export class PdfDisplayComponent implements OnInit {
  // 存储PDF地址的属性
  pdfDataUrl: SafeResourceUrl | null = null;

  ngOnInit(): void {
    // 初始化时仅执行一次生成链接的逻辑
    this.pdfDataUrl = this.returnEncodedLink();
  }

  // 原有的返回编码链接的方法逻辑保持不变
  returnEncodedLink(): SafeResourceUrl {
    // 原有链接拼接、DomSanitizer安全转义逻辑
  }

  // 若后续有切换PDF的需求，仅在切换逻辑触发时重新给pdfDataUrl赋值即可
  // changePdfFile(fileId: string) {
  //   this.pdfDataUrl = this.returnEncodedLink(fileId);
  // }
}

• 修改模板代码，直接绑定提前缓存的pdfDataUrl属性，不要绑定方法调用。可增加*ngIf判断，等地址生成完成后再渲染object标签，避免加载空地址：

<div *ngSwitchCase="'pdf'"
     id="pdf"
     class="pdf">
  <object *ngIf="pdfDataUrl"
          style="width: 100%; height: 100%;"
          [data]="pdfDataUrl">
  </object>
</div>

效果说明 #

修改后Angular只会在pdfDataUrl的引用真的发生变化时，才会更新<object>标签的data属性，不会在每次变更检测时重复生成新URL触发PDF重载，闪烁问题会直接消失。

内容的提问来源于stack exchange，提问作者Clancinio