新闻列表新闻详情

Posted 2021-01-07 wskxy

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和上面一样。