新闻列表、新闻详情

1.函数跳转

  News跳转函数

import { NewsinfoPage } from '../newsinfo/newsinfo';
import { NavController } from 'ionic-angular';
  list = [];
  constructor(public navCtrl: NavController) {
    for (let i = 0; i < 10; i++) {
      this.list.push(`第${i}条数据`)
    }
  }

  goInfo(index) {
    this.navCtrl.push(NewsinfoPage,{
      key:index,
      value:"kxy"
    });
  }

  html

  <ion-list >
    <ion-item *ngFor="let item of list;let key=index" (click)="goInfo(key)">
      {{item}}
    </ion-item>
  </ion-list>

  Newsinfo接收函数

import {  NavParams } from 'ionic-angular';
public key;
  public value;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.key=navParams.get('key');
    this.value=navParams.get('value')
  }

 2.属性跳转

  News跳转函数

  不需要引入NavController、NavParams

import { NewsinfoPage } from '../newsinfo/newsinfo';
  public NewsinfoPage=NewsinfoPage;//一定要写,吧NewsinfoPage赋值给一个属性,前端只能调用属性
  public list = [];
  public params;
  constructor() {
    for (let i = 0; i < 10; i++) {
      this.list.push(`第${i}条数据`)
    }
    this.params={
      key:123,
      value:"kxy"
    }
  }

  html

  <ion-list >
    <ion-item *ngFor="let item of list;let key=index" [navPush]="NewsinfoPage" [navParams]="params">
      {{item}}
    </ion-item>
  </ion-list>

  NewsInfo和上面一样。

猜你喜欢

转载自www.cnblogs.com/wskxy/p/9689628.html