Question

我想使用InAppBrowser插件在设备的浏览器中打开一个外部URL。我的代码如下：

home.ts

openPage(url)
  {
    const options: InAppBrowserOptions =
    {
      zoom: 'no',
      hardwareback: 'no'
    }
    const browser = this.InAppBrowser.create(url, '_self', options);
    browser.show();
  }

对于home.html

<button ion-button full (click)="openPage({{article.url}})">Read more</button>

现在，{{article.url}}是我从数组中获得的URL，应该将按钮的URL自动设置为article.url应该具有的URL。但是，我现在面临的问题是执行{{article.url}}会产生插值错误，而忽略{{}}会产生_co.openPage is not a function错误。我该如何进行？

编辑：

home.ts的其余部分如下

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';
import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  news: any;
  articels: string[];
  errorMessage: string;


  constructor(public navCtrl: NavController, public rest:RestProvider, private InAppBrowser: InAppBrowser) {
    this.getNews();
  }

  getNews() {
    this.rest.getNews()
    .then(result => {
      this.news = result;
      this.articels = this.news.articles;
      console.log(this.news.articles[0]);
    });
  }
  openPage(url)
  {
    const options: InAppBrowserOptions =
    {
      zoom: 'no',
      hardwareback: 'no'
    }
    const browser = this.InAppBrowser.create(url, '_self', options);
    browser.show();
  }


}

home.html如下

<ion-header>
  <ion-navbar>
    <ion-title>
      Recent News
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card *ngFor="let article of articels">
      <ion-item>
          <h2>{{article.author}}</h2>
          <p>{{article.publishedAt}}</p>
        </ion-item>
          <img src="{{article.urlToImage}}">
          <ion-item>
              <h2>{{article.title}}</h2>
              <p>{{article.description}}</p>
            </ion-item>
            <button ion-button full (click)="openPage(article.url)">Read more</button>
    <ion-card-content>

    </ion-card-content>
  </ion-card>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <p>Powered by NEWS API</p>
  </ion-toolbar>
</ion-footer>

Ionic 3打开外部URL，其中URL由数组设置

0 个答案: