ionic3服务器请求新闻列表信息以及点击跳转详情

一、首先引入请求，传送门：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的数据传递方法

转载请注明地址，良心写作，禁止用于商业用途！

ionic3服务器请求新闻列表信息以及点击跳转详情

猜你喜欢