angular - 将局部变量传递给 html 标签

Question

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

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

我想在同一个 Angular 组件的 .html 文件中做这样的事情：

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

我试过{{var1}}代替 var1 但它不起作用。我怎样才能做到这一点？

标签： angular

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