将局部变量传递给html标签

Question

在Angular .ts文件中，我有一个变量：

var1 = "https://angular.io/api/router/RouterLink";

我想在同一个Angular组件的.html文件中执行以下操作：

<iframe [src]="var1"></iframe>

我尝试使用{{var1}}代替var1，但是它不起作用。 我该怎么办？

Answer 1

您需要使用bypassSecurityTrustResourceUrl作为网址

export class AppComponent  {
  name = 'Set iframe source';
  url: string = "https://angular.io/api/router/RouterLink";
  urlSafe: SafeResourceUrl;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }
}

HTML：

<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>

https://stackblitz.com/edit/angular-iframe-src