<分区>
我想在这两个页面之间传递数据。可以从新的详情页面加载到新的详情页面，但这里遇到的问题是无法从详情页面获取 api 数据。
news.html新页面
<ion-header>
<ion-navbar color="danger" no-border-bottom>
<button ion-button menuToggle>
<ion-icon name="ios-contact"></ion-icon>
</button>
<ion-title>民安</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item-group *ngFor="let new of news">
<ion-thumbnail *ngIf="new.Preview_image1" item-start>
<img src="{{new.Preview_image1}}">
</ion-thumbnail>
<button ion-item (click)="goToNewsDetail(new)">
<h2>{{new.title}}</h2>
<h2>{{new.publish_time}}</h2>
<p>
<ion-icon name="chatboxes">{{new.comments_count}}</ion-icon>
</p>
</button>
</ion-item-group>
</ion-content>
news.ts新功能页面
import { Component, } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NewsDataProvider } from '../../providers/news-data/news-data';
import { NewsDetailPage } from '../news-detail/news-detail';
@IonicPage()
@Component({
selector: 'page-news',
templateUrl: 'news.html',
})
export class NewsPage {
news:any;
constructor(public navCtrl: NavController, public navParams: NavParams,public newsData:NewsDataProvider){
this.getNews();
}
getNews() {
this.newsData.getNews().then(data => {
this.news = data;
});
}
goToNewsDetail() {
this.navCtrl.push(NewsDetailPage);
}
}
新闻细节.ts 。新闻详情功能页
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NewsDataProvider } from '../../providers/news-data/news-data';
@IonicPage()
@Component({
selector: 'page-news-detail',
templateUrl: 'news-detail.html',
})
export class NewsDetailPage {
new: any;
constructor(public navCtrl: NavController, public navParams: NavParams,public newsData:NewsDataProvider) {
this.new = navParams.get('new');
}
}
news-detail.html 新闻详情页
<ion-header>
<ion-navbar color="danger">
<ion-title>{{new.title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
news content
</ion-content>
news.data.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class NewsDataProvider {
data:any;
constructor(public http: Http) {
//console.log('Hello NewsDataProvider Provider');
}
getNews() {
if (this.data) {
return Promise.resolve(this.data);
}
return new Promise(resolve => {
this.http.get('http://servertrj.com/api/news?api_key=123').map(res => res.json().data).subscribe(data => {
this.data = data;
resolve(this.data);
});
});
}
}