Javascript 角度-如何动态下载Json文件

我试图制作一个下载按钮，下载页面中显示的Json文件的特定部分。 我用了很多方法，这里的这个方法看起来很好： 但实际上，它只下载我的json文件的一部分，而不下载其他依赖于路由的文件。让我解释一下。 以下是我使用看到的解决方案制作的TS：

    propertyKey: Property;
  constructor(
    private route: ActivatedRoute,
    public router: Router,
    ) { }
ngOnInit() {

    this.propertyKey = this.route.snapshot.data['propertyKey'];
}
JsonData() {
    return of({
      rule: this.propertyKey.rule,
      cdfRule: this.propertyKey.cdfRule,
      compiledRule: this.orgaCompiledRule,
      snippet: this.propertyKey.snippets,
      cdfSnippet: this.propertyKey.cdfSnippets,
      all: this.propertyKey

    });
  }

  private setting = {
    element: {
      dynamicDownload: null as HTMLElement
    }
  }

  dynamicDownloadTxt() {
    this.JsonData().subscribe((res) => {
      this.dyanmicDownloadByHtmlTag({
        fileName: 'My Report',
        text: JSON.stringify(res)
      });
    });

  }

  private dyanmicDownloadByHtmlTag(arg: {
    fileName: string,
    text: string
  }) {
    if (!this.setting.element.dynamicDownload) {
      this.setting.element.dynamicDownload = document.createElement('a');
    }
    const element = this.setting.element.dynamicDownload;
    const fileType = arg.fileName.indexOf('.json') > -1 ? 'text/json' : 'text/plain';
    element.setAttribute('href', `data:${fileType};charset=utf-8,${encodeURIComponent(arg.text)}`);
    element.setAttribute('download', arg.fileName);

    var event = new MouseEvent("click");
    element.dispatchEvent(event);
  }

}

在模板中：

<div *ngIf="router.isActive('orga-data-model/property/jsondisplay/rule', false)" [appJsonFormatter]="propertyKey.rule">
    <div style="text-align-last: right; margin-right: 10px; padding-top: 10px;">
        <a style="font-size: 1.5em;" (click)="dynamicDownloadTxt()">Download Json</a>
    </div>
</div>


<div *ngIf="router.isActive('orga-data-model/property/jsondisplay/cdfruleorga', false)" [appJsonFormatter]="propertyKey.cdfRule">
    <div style="text-align-last: right; margin-right: 10px; padding-top: 10px;">
        <a style="font-size: 1.5em;" (click)="dynamicDownloadTxt()">Download Json</a>
    </div>
    <div *ngIf="propertyKey.cdfRule === null || !propertyKey.cdfRule">No Data</div>
</div>

下载Json
下载Json
没有数据

因此，在我的模板中，显示json不是问题。而且效果很好。当我想下载特定url中显示的json部分时，它不起作用，它总是下载相同的json。

---

有人能帮我吗？谢谢。

我认为您的问题在于线路：

this.propertyKey = this.route.snapshot.data['propertyKey'];

它只执行一次（在init上），这意味着当您导航到另一个页面（由同一组件呈现）时，

propertyKey

-引用不会更新

相反，请尝试以下方法：

this.route.data.subscribe(data => {
    this.propertyKey = data['propertyKey'];
});

---

你能分享一下这个问题吗？这会很困难，有很多不同的服务可以让json工作和显示。但是这里的问题是如何使jsonData函数成为动态的，并且只引用路由上的数据，而不是函数中声明的数据。否则，我想我总是会收到相同的数据。