ionic-navigation

2019独角兽企业重金招聘Python工程师标准>>>

今天弄了一下午navigation,遇到不少问题，及时总结记录，

//基础页面，在这个页面上点击每个列表分别显示详细信息
<ion-header>
	<ion-navbar>
		<ion-title>朋友</ion-title>
	</ion-navbar>
</ion-header>

<ion-content padding class="about">
	<ion-list>
		<ion-item *ngFor="let contact of contacts" (click)="openNavDetailsPage(contact)">
			<ion-avatar item-left>
				<img src="../images/{{contact.contactid}}.png" alt="">
		</ion-avatar>
		<h2>{{contact.contactname}}</h2>
		<p>{{contact.contacttext}}</p>
		</ion-item>
	</ion-list>


</ion-content>

import {Component} from '@angular/core';
//import {NavController} from 'ionic-angular';
import {NavController} from 'ionic-angular';
import {NavigationDetailsPage} from '../about/navigation-detail';


@Component({
  templateUrl: 'build/pages/about/about.html'
})
export class AboutPage {
  contacts = [];
  constructor(public nav: NavController) {
    this.contacts =[
          {"contactid":1,"contactname":"张三","contacttext":"13123451388"},
          {"contactid":2,"contactname":"张想","contacttext":"13123451388"},
          {"contactid":3,"contactname":"Sam","contacttext":"131233333333"},
          {"contactid":4,"contactname":"Jane","contacttext":"13123422221"},
          {"contactid":5,"contactname":"Cary","contacttext":"13123451322"},
          {"contactid":6,"contactname":"Kate","contacttext":"13123451388"},
      ]
  }
    openNavDetailsPage(contact) {
    this.nav.push(NavigationDetailsPage, { item: contact });
  }
 
}
//NavParams参数可以引用夜可以不引用

//详细页面
<ion-header>
	<ion-navbar>
		<ion-title>{{item.contactname}}</ion-title>
	</ion-navbar>
	
</ion-header>
<ion-content padding>{{item.contacttext}}</ion-content>

//详细页面的ts文件

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

@Component({
   templateUrl: 'build/pages/about/navigation-detail.html'
})

export class NavigationDetailsPage {
  item;
  constructor(params: NavParams) {
    this.item = params.data.item;
  }
}

 

转载于:https://my.oschina.net/u/2612473/blog/753295