将数据从组件传递到 html in angular

Question

在特定情况下，我试图将数据从组件传递到 html：

我在获取 id 的组件方法中有：

component.ts:

getId(){


this.id = 3; // example, i have in id number 3 (example)

}

component.html:

我这里有一个 link url 在 iframe

<iframe width="1000" height="1000" src="http://....../watcher/ {{ here i want this.id}}" style="border:0"></iframe>

如何在 component.html 中传递此 ID？

Answer 1

在你的 ts:


import { DomSanitizer } from '@angular/platform-browser';

id = 100; // for instance

  constructor(protected _sanitizer: DomSanitizer) {}

  public getUrl(id: number) {
    const urlSanitazed = `http://http.cat/${id}`; // Your url `http://.../watcher/${id}`;

    return this._sanitizer.bypassSecurityTrustResourceUrl(urlSanitazed);
  }

在html:

<iframe
    width="1000"
    height="1000"
    [src]="getUrl(id)"
    style="border: 0"
  ></iframe>

将数据从组件传递到 html in angular

pass data from component to html in angular

components

angular