今天弄了一下午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;
}
}
(adsbygoogle = window.adsbygoogle || []).push({});