如何使用变量在Angular 8中动态设置HTML Object元素的属性值？

Question

浏览器：Chrome

假设我的HTML和Typescript文件中包含以下代码行：

source.html

<object class = "page" data = "www.google.com" ></object>

来源

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

@Component({
  selector: 'app-source',
  templateUrl: './source.component.html',
  styleUrls: ['./source.component.css']
})
export class SourceComponent implements OnInit {

  url:string = "www.yahoo.com";

  constructor() { }

  ngOnInit() {
  }

}

HTML文件和.ts文件位于同一组件中。

我想使用打字稿文件中的url变量来更改数据属性的值。

我将如何去做呢？

我的HTML文件无法识别我在打字稿文件中输入的url变量。

Answer 1

这应该可以解决问题，

<object class = "page" data = "{{url}}" ></object>

Answer 2

对于这种特殊情况，您需要dom消毒剂：

constructor(private sanitizer: DomSanitizer) {
   this.url = this.sanitizer.bypassSecurityTrustResourceUrl("https://www.yahoo.com");
}

然后：

<object class = "page" data = "{{url}}" ></object>

我对对象不是很熟悉，但是您可以通过属性绑定不使用dom消毒剂来摆脱困境：

<object class = "page" [data]="url" ></object>

要么

<object class = "page" [attr.data]="url" ></object>