html中对象标签的数据属性没有更新新的url

Question

问题： 我正在尝试动态更新对象标签的数据属性。 问题是它第一次完美加载，但此后即使当我检查数据属性值在使用 Angular 的 html 代码中完美更新时，它也没有。我相信它不会被刷新。

HTML代码：

<object id="content" *ngIf="download" [data]="newUrl" width="70%" height="300px"></object>

角度代码：

  updateUrl(url: string) {
    console.log('Parent Component updateUrl: ' + url);
    this.download = false; // hide

    this.newUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    document.getElementById("content").setAttribute('data', url);    
    this.download = true; // show 
  }

我尝试了什么： 在更新 url 之前隐藏/显示，但不起作用。

请注意我不能使用 jQuery。任何帮助将不胜感激。谢谢！

Answer 1

您应该避免在 Angular 中使用纯 JavaScript 代码，否则 Angular 将无法感知更改。进行以下更改 -

html代码

<object id="content" *ngIf="download" [attr.data]="newUrl" width="70%" height="300px"></object>

角度代码

 updateUrl(url: string) {
    console.log('Parent Component updateUrl: ' + url);
    this.download = false; // hide
    this.newUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url); 
    this.download = true; // show 
  }

演示

Woking 副本在这里https://stackblitz.com/edit/angular-object-url-pdf

Answer 2

像这样更新数据属性，而不是使用 Javascript 更新。

<object id="content" *ngIf="download" [attr.data]="newUrl" width="70%" height="300px"></object>