javascript - 在下拉选择中动态更改 iFrame src

Question

我正在尝试根据下拉列表中的选择动态更改 iframe 的 src。我遇到错误，说 URL 使用不安全，所以我添加了 Dom Sanitizer，如下所示

<div style="text-align:center">
  <h1>
   Reports
  </h1>
  </div>
<select (onclick) = "selectedOption($event)">
  <option value="https://app.powerbi.com/reportEmbed?reportId=401c&autoAuth=true&ctid=5bd1">Productivity</option>
</select>

<iframe width="1140" height="541.25" src="{{safeUrl}}" frameborder="0" allowFullScreen="true"></iframe>

typescript 如下

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

constructor(private sanitizer: DomSanitizer) {
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PowerBIIntegration';
selectedValue: string = ''; 

  selectedOption( event : any){
    this.selectedValue = event.target.value;
    let safeUrl =  this.sanitizer.bypassSecurityTrustHtml(this.selectedValue);
    console.log(this.selectedValue);
  }
}

我将 import { DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/platform-b​​rowser'; 添加到 app.module.ts 中。但它错误地说

src/app/app.component.ts(4,21) 中出现错误:错误 TS1005:预期为“,”。src/app/app.component.ts(4,30):错误 TS1005:预期为“，”。src/app/app.component.ts(4,46): 错误 TS1005: ';'预计。

i“wdm”:编译失败。

src/app/app.component.ts(4,1) 中出现错误:错误 TS2304:找不到名称“构造函数”。src/app/app.component.ts(4,13):错误 TS2304:找不到名称“private”。src/app/app.component.ts(4,21):错误 TS2304:找不到名称“sanitizer”。src/app/app.component.ts(18,25):错误 TS2339:“AppComponent”类型上不存在属性“sanitizer”。

Answer 1

您似乎对如何使用 Angular 数据绑定(bind)缺乏一些了解，并且您的 Typescript 文件中存在一些明显的问题。

首先，类 AppComponent 的构造函数应该位于所述类中，而不是之前:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    ...

    constructor(private sanitizer: DomSanitizer) {
    }

    ...
}

其次，在您看来，如果您想将 src 的值绑定(bind)到 typescript 中的变量，请使用 [src]，如下所示:

<iframe width="1140" height="541.25" [src]="safeUrl" frameborder="0" allowFullScreen="true"></iframe>

最后一个问题是，您只在组件的 selectedOption 中声明了 safeUrl，它不是组件本身的成员变量，因此 View 无法访问它，你应该像这样改变你的组件:

export class AppComponent {
    title = 'PowerBIIntegration';
    selectedValue: string = '';
    safeUrl: string;

    constructor(private sanitizer: DomSanitizer) {
    }

    selectedOption(event : any) {
        this.selectedValue = event.target.value;
        this.safeUrl = this.sanitizer.bypassSecurityTrustHtml(this.selectedValue);
    }
}