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

浏览器：Chrome

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

source.html

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

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

我想使用typescript文件中的url变量更改数据属性的值

我该怎么做呢

---

我的HTML文件无法识别我放在typescript文件中的url变量。

这应该可以解决问题

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

---

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

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

然后：

我对对象不太熟悉，但您可以通过属性绑定不使用dom sanitizer：

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

或

虽然它确实能识别变量。它不会加载我这边的页面。可能是我的浏览器吗？我正在使用Chrome。听起来像是一个新问题：）。控制台日志中的错误是什么？错误：资源URL上下文中使用了不安全的值您的对象是什么？那是什么材料？尝试将http://添加到url的开头。我尝试将http://添加到google.com的开头，但它不起作用。您显示的

object

元素没有按原样运行：您希望它运行吗？object指的是：我想在我的主页中插入一个网页。我知道object标记是什么和什么这是给你的。我几乎从不使用它。iframe通常是用于将页面放入页面中的go-to元素

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

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

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