変数を使用してAngular8のHTMLオブジェクト要素の属性値を動的に設定するにはどうすればよいですか?

アルン・アジェイ

ブラウザ:Chrome

HTMLファイルとTypescriptファイルに次のコード行があるとします。

source.html

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

source.ts

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ファイルは同じコンポーネントにあります。

typescriptファイル内のurl変数を使用してデータ属性の値を変更したい

どうすればこれを行うことができますか?

私のHTMLファイルは、typescriptファイルに入れurl変数を認識しません

bryan60

この特定のケースでは、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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ