我无法使用带有Angular的Ionic 4在iframe中加载外部URL

Question

我在Angular和Ionic方面比较业余，在尝试构建某些东西时，我面临一个问题。

我有一个外部URL，我试图在iframe中加载它，并且遇到了类似问题：

因此，我有两个页面组件主页和文章。 在home.page.html中，我有一个带有如下点击事件的离子卡：

<ion-card class="newsCard" color="light" (click)="showArticleInModal(item.url)" *ngFor="let item of itemStack; let i = index">
//....
</ion-card-content>

在我的home.page.ts中，我的功能是

async showArticleInModal(url) {
    const modal = await this.modalController.create({
      component: ArticlePage,
      animated: true,
      mode: "md",
      showBackdrop: true,
      componentProps: { url: this.sanitizer.bypassSecurityTrustResourceUrl(url) }
    });
    return await modal.present();  
}

在我的情况下，我将经过清理的URL传递到称为article的模式页面。 在我的article.page.html中，我有以下代码：

<ion-content>
  <div #frame style="width:100vw; height:100vh; overflow:scroll !important;-webkit-overflow-scrolling:touch !important">
    <!-- <iframe style="width:100vw; height:100vh;" [src]="url | cleanurl" class="iframe" scrolling="yes"></iframe> -->
    <iframe [src]="url | cleanurl" style="width:100vw; height:100vh;" class="iframe" scrolling="yes"></iframe>
  </div>
</ion-content>

cleanurl是我使用shared.module.ts

加载的自定义管道

import { NgModule } from "@angular/core";
import { CleanurlPipe } from './cleanurl.pipe';

@NgModule({
    declarations: [CleanurlPipe],
    exports: [CleanurlPipe]
})

export class SharedModule { }

但是出现这样的错误

  

错误错误：未捕获（承诺）：错误：无法匹配任何路由。   网址段：“ SafeValue％20must％20use％20％5Bproperty％5D”

我无法弄清楚，需要帮助。有人可以调查一下并告诉我所缺少的内容吗？

顺便说一句，我在下面检查了此解决方案，但没有成功

• Trying to pass URL into Iframe Src Angular 2 getting an error

先谢谢您了:)