一、首先引入請求，傳送門：https://blog.csdn.net/weixin_41404460/article/details/83110952

二、使用腳手架新建一個列表頁和一個詳情頁，在列表page頁中寫入以下程式碼：

<ion-list>
        <ion-item *ngFor="let item of newslist; let i=index" (click)="gonews(i)">
            <ion-label>{{item.title}}</ion-label>
        </ion-item>
    </ion-list>
 

三、列表page.ts中原始碼如下：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NewdetailPage } from '../newdetail/newdetail';
import { Http } from '@angular/http';
import { map } from 'rxjs/operators';



/**
 * Generated class for the NewlistPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-newlist',
  templateUrl: 'newlist.html',
})
export class NewlistPage {
  public newslist:any =[];
  constructor(public navCtrl: NavController, public navParams: NavParams,
              public http:Http) {
  }

  ionViewDidLoad() {
    // console.log('ionViewDidLoad NewlistPage');
    this.loadingfun();
  }

  gonews(i){
    this.navCtrl.push(NewdetailPage,{"mytext":this.newslist[i]})
  }

  loadingfun(){
    var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"
    this.http.get(url).pipe(map(res => res.json())).subscribe((data)=>{
      console.log(data.result);
      this.newslist=data.result
    });

  }

}
 

上述程式碼中的重點是在navCtrl.push的同時就傳遞給詳情頁元件資料，同時取名mytext

四、進入詳情頁ts檔案中：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the NewdetailPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-newdetail',
  templateUrl: 'newdetail.html',
})
export class NewdetailPage {
  mytext: string = null;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.mytext = navParams.get("mytext");
    // console.log(this.mytext);
  }

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

}
 

由於第三步我們在點選跳轉的過程中，已經記錄了一個名為mytext的資料，在這邊第四步直接可以通過navParams.get("名稱")的語法形式，即可將資料獲取，那麼就只剩下之後一步了。

五、詳情頁page頁面程式碼如下:

<!--
  Generated template for the NewdetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>newdetail</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <div *ngIf="myParam!=null">
        <h5>Parameters passed:</h5>
        <ul>
          <li *ngFor="let item of myParam; let i=index">
            {{item}}
          </li>
        </ul>
      </div>
    <div *ngIf="mytext!=null">
        <h1 text-center>{{mytext.title}}</h1>
        <label>{{mytext.username}}</label>
        <label>{{mytext.dateline | date}}</label>
    </div>
</ion-content>

大功告成！

ps:ionic 4中的nav是用的Url跳轉，ionic3是直接引數傳遞，2種方法不一，等有了時間，我會補充最新ionic4的資料傳遞方法

轉載請註明地址，良心寫作，禁止用於商業用途！