Я не могу загрузить внешний URL-адрес в iframe, используя Ionic 4 с Angular - PullRequest
0 голосов
/ 01 марта 2019

Я относительно любитель Angular и Ionic, и, пытаясь что-то создать, я столкнулся с проблемой.

У меня есть внешний URL-адрес, который я пытаюсь загрузить в iframe, и получаю такую ​​проблему, как:

enter image description here

Итак, у меня есть две страницы: главная и статья.В 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 { }

Однако яполучая ошибку, подобную этой,

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не может соответствовать ни один маршрут.Сегмент URL: «SafeValue% 20must% 20use% 20% 5Bproperty% 5D»

Я не могу понять это, и мне нужна помощь.Может кто-нибудь, пожалуйста, посмотрите на это и скажите мне, чего не хватает?

Кстати, я проверил это решение ниже, но не сработало,

Заранее спасибо :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...