Angular项目中如何程序化更新Telerik Report Viewer属性？

针对你遇到的serviceUrl和templateUrl无法通过代码更新的问题，核心原因是Telerik Report Viewer对这两个属性的变更感知机制与report不同，且Angular Element的变更检测在部分场景下不会自动触发组件内部的配置更新。可按以下步骤修复：

1. 为输入属性添加Setter并手动同步配置 #

在包装Telerik Viewer的Angular组件中，给serviceUrl和templateUrl添加Setter（而非简单的@Input()声明），在Setter中直接更新Viewer实例的配置项：

import { Component, Input, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ReportViewerComponent } from '@progress/telerik-angular-report-viewer';

@Component({
  selector: 'app-report-wrapper',
  template: `<tr-viewer #viewer
    [report]="report"
    [serviceUrl]="internalServiceUrl"
    [templateUrl]="internalTemplateUrl">
  </tr-viewer>`
})
export class ReportWrapperComponent {
  @ViewChild('viewer') viewer!: ReportViewerComponent;
  internalServiceUrl = 'default-service-url';
  internalTemplateUrl = 'default-template-url';

  @Input() report!: string;

  @Input() set serviceUrl(url: string) {
    this.internalServiceUrl = url;
    if (this.viewer) {
      this.viewer.serviceUrl = url;
      this.cdr.detectChanges();
      // 强制Viewer重新加载配置
      this.viewer.initViewer();
    }
  }

  @Input() set templateUrl(url: string) {
    this.internalTemplateUrl = url;
    if (this.viewer) {
      this.viewer.templateUrl = url;
      this.cdr.detectChanges();
      this.viewer.initViewer();
    }
  }

  constructor(private cdr: ChangeDetectorRef) {}
}

2. 宿主应用正确触发属性变更 #

宿主应用更新Web Component属性时，需通过属性绑定触发Angular Element的输入变更（Angular Element会将驼峰命名的输入属性转换为短横线分隔的DOM属性）：

// 原生JS环境下的正确更新方式
const viewerEl = document.querySelector('app-report-wrapper');
viewerEl.setAttribute('service-url', 'new-service-url');
viewerEl.setAttribute('template-url', 'new-template-url');

3. 强制Viewer重新初始化 #

serviceUrl和templateUrl属于Viewer初始化阶段读取的配置，单纯修改属性不会触发内部刷新。调用initViewer()方法可强制Viewer重新加载配置并刷新报表，这一步是解决问题的关键。

4. 禁用自动渲染（可选） #

如果Viewer初始渲染时加载了默认配置，可能导致后续变更被忽略。可在模板中添加[autoRender]="false"，之后在组件初始化和属性变更后手动调用renderReport()：

<tr-viewer #viewer
  [report]="report"
  [serviceUrl]="internalServiceUrl"
  [templateUrl]="internalTemplateUrl"
  [autoRender]="false">
</tr-viewer>

对应在Setter中补充：

this.viewer.renderReport();

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