新闻列表、新闻详情
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和上面一样。