我正在尝试根据下拉列表中的选择动态更改 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-browser';
添加到 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”。
最佳答案
您似乎对如何使用 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);
}
}
关于javascript - 在下拉选择中动态更改 iFrame src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56091499/