Ionic framework 我如何为爱奥尼亚3页面中的嵌入式网页清理此URL？

我在爱奥尼亚3有一个网页，里面有一个嵌入式网页

ionic (Ionic CLI) : 3.9.2
Ionic Framework    : ionic-angular 3.9.2

我希望将URL传递给它，而不是像我在这里所做的那样硬编码：

//myPage.html
<ion-header>
</ion-header>

<ion-content padding>
    <iframe class='webPage' name="samplePage" src="https://www.example.com">
    </iframe>
</ion-content>

或者类似的主题

我尝试调用一个函数，该函数返回URL的清理副本

// myPage.html
<ion-content padding>
    <iframe [class]="webPage" [name]="samplePage" [src]="getSafeSupportURL()">
    </iframe>
</ion-content>

//myPage.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DomSanitizer, SafeUrl } from "@angular/platform-browser";

@IonicPage()
@Component({
  selector: 'page-websupport',
  templateUrl: 'myPage.html',
})
export class WebsupportPage {

  cleanSupportURL: any;

  constructor(public navController: NavController, 
      public navParams: NavParams, 
      private sanitizer: DomSanitizer) {
  }

  getSafeSupportURL():SafeUrl {
      return this.sanitizer.bypassSecurityTrustUrl('https://example.com'); 
  }

  ionViewDidLoad() {
  console.log('ionViewDidLoad WebsupportPage');
  }

}

//myPage.html
//myPage.ts
从'@angular/core'导入{Component}；
从“离子角度”导入{IonicPage，NavController，NavParams}；
从“@angular/platform browser”导入{domsanizer，SafeUrl}”；
@IonicPage（）
@组成部分({
选择器：“网页支持”，
templateUrl:'myPage.html'，
})
导出类WebsupportPage{
cleanSupportURL:any；
建造商（公共导航控制器：导航控制器，
公共导航参数：导航参数，
私人消毒剂（消毒剂）{
}
getSafeSupportURL（）：SafeUrl{
返回此.sanitizer.bypassSecurityTrustUrl（'https://example.com'); 
}
ionViewDidLoad（）{
log（'IonViewDidLoadWebSupportPage'）；
}
}

我尝试过创建一个经过净化的变量并在HTML中引用它

// myPage.html
//...
<ion-content padding>
    <iframe [class]="webPage" [name]="samplePage" [src]={{cleanSupportURL}}>
    </iframe>
</ion-content>

//myPage.ts
//...
cleanSupportURL: any;

constructor(public navController: NavController, 
    public navParams: NavParams, 
    private sanitizer: DomSanitizer) {
  this.cleanSupportURL = 
      this.sanitizer.bypassSecurityTrustUrl('https://example.com');
      // also tried bypassSecurityTrustResourceUrl
}

// myPage.html
//...
<ion-content padding>
    <iframe [class]="webPage" 
            [name]="samplePage" 
            [src]="sanitizer.bypassSecurityTrustResourceUrl{{myURL}}">
    </iframe>
</ion-content>

//myPage.ts
//...
myURL: any;

constructor(public navController: NavController, 
    public navParams: NavParams, 
    private sanitizer: DomSanitizer) {
   this.myURL = 'https://example.com';
}

//myPage.html
//...
//myPage.ts
//...
cleanSupportURL:any；
建造商（公共导航控制器：导航控制器，
公共导航参数：导航参数，
私人消毒剂（消毒剂）{
this.cleanSupportURL=
this.sanitizer.bypassSecurityTrustUrl（'https://example.com');
//还尝试绕过SecurityTrustResourceURL
}

我甚至尝试过在HTML中对其进行消毒

// myPage.html
//...
<ion-content padding>
    <iframe [class]="webPage" [name]="samplePage" [src]={{cleanSupportURL}}>
    </iframe>
</ion-content>

//myPage.ts
//...
cleanSupportURL: any;

constructor(public navController: NavController, 
    public navParams: NavParams, 
    private sanitizer: DomSanitizer) {
  this.cleanSupportURL = 
      this.sanitizer.bypassSecurityTrustUrl('https://example.com');
      // also tried bypassSecurityTrustResourceUrl
}

// myPage.html
//...
<ion-content padding>
    <iframe [class]="webPage" 
            [name]="samplePage" 
            [src]="sanitizer.bypassSecurityTrustResourceUrl{{myURL}}">
    </iframe>
</ion-content>

//myPage.ts
//...
myURL: any;

constructor(public navController: NavController, 
    public navParams: NavParams, 
    private sanitizer: DomSanitizer) {
   this.myURL = 'https://example.com';
}

//myPage.html
//...
//myPage.ts
//...
myURL：任何；
建造商（公共导航控制器：导航控制器，
公共导航参数：导航参数，
私人消毒剂（消毒剂）{
this.myURL=https://example.com';
}

---

你知道如何绕过这个非常有用的安全性吗？

我将为你尝试的第二种方法提供一个解决方案，创建一个经过净化的变量并在HTML中引用它

更改myPage.html，如下所示。

<ion-content padding>
    <iframe [class]="webPage" [name]="samplePage" [src]="cleanSupportURL">
    </iframe>
</ion-content>

import { DomSanitizer } from "@angular/platform-browser";

export class MyPage {

    private cleanSupportURL: any;
    sanitizer: DomSanitizer;
    url: string = "https://example.com";

    constructor(sanitizer: DomSanitizer) {

        this.sanitizer = sanitizer;
        this.cleanSupportURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
    }

}

---

尝试上面的更改，它会起作用。

好多了。。。它现在对我有用。什么是秘方？它是以字符串而不是sting常量的形式传递URL吗？如果这个答案对您有效，请标记我认为的答案。。。很抱歉