web-dev-qa-db-ja.com

Angular 7 iframeとのリンク

リンク（project.projectUrl）をiframe内にバインドしようとしていますが、機能しないようです。 JSONファイルのprojectUrlをiframe srcにバインドして、可能であればモーダル内から動的にiframeを表示できるようにしています。以下のコメントで私のコードを参照してください。

angulariframe
2
multiv123

Srcをsanitizeする必要があります。 https://angular.io/api/platform-b​​rowser/DomSanitizer#bypassSecurityTrustResourceUrl 。

コンポーネントコンストラクターでこれを行う方法の1つ：

constructor(sanitizer: DomSanitizer, ....)

その後

<iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(project.projectUrl)" height="600" width="1000"></iframe>
5
avramz

あなたはangularを使用してhtmlインジェクターを間違っています

<iframe [src]="project.projectUrl" height="600" width="1000"></iframe>

または

<iframe src="{{project.projectUrl}}" height="600" width="1000"></iframe>

両方を行う場合は、基本的にこれを{{project.projectUrl}}の代わりにTypeScript project.projectUrlで呼び出すことになります。[src]を使用することをお勧めします。これは、ドキュメントで示唆されており、読みやすいためです。

うまくいけば:)

1
Alex Dunlop

JavaScriptで問題を修正しました。

この場合、[]または{{}}を使用しないでください。

viewChildまたは他の何かによってテンプレートに要素を取得し、それに属性を設定します。

これがコード例です。

HTMLテンプレート

<iframe #iframe height="600" width="1000"></iframe>

あなたのコンポーネントで

export class Component implements AfterViewInit {

   @ViewChild('iframe') iframe: ElementRef

  ngAfterViewInit() {
   this.iframe.nativeElement.setAttribute('src', project.projectUrl);
  }
}
1
Ashot Aleqsanyan