If using Ionic 3:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ConstantsProvider } from '../providers/constants/constants';
import { PostPage } from '../pages/post/post';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
PostPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpClientModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
PostPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
ConstantsProvider
]
})
export class AppModule {}
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ConstantsProvider } from '../../providers/constants/constants';
import { HttpClient } from '@angular/common/http';
import { PostPage } from '../post/post';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
title: string;
posts: any[];
constructor(private constants: ConstantsProvider, private http: HttpClient, public navCtrl: NavController) {
http.get('https://www.googleapis.com/blogger/v3/blogs/byurl?key=' + constants.getApiKey() + '&url=' + constants.getUrl())
.subscribe(data => {
this.title = data.name;
this.getPosts(data.posts.selfLink);
console.log(data);
});
}
getPosts(url: string) {
this.http.get(url + '?maxResults=80' + '&key=' + this.constants.getApiKey())
.subscribe(data => {
this.posts = data.items;
console.log(this.posts);
});
}
openPost(post) {
this.navCtrl.push(PostPage, {post: post})
}
}
post.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the PostPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-post',
templateUrl: 'post.html',
})
export class PostPage {
private post;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.post = navParams.get('post');
console.log(this.post);
}
ionViewDidLoad() {
console.log('ionViewDidLoad PostPage');
}
}
if using ionic5:
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { PostPage } from "./post/post.page";
import { HttpClientModule} from '@angular/common/http'
import { PostPageRoutingModule } from './post/post-routing.module';
import { PostPageModule } from './post/post.module';
@NgModule({
declarations: [AppComponent,],
entryComponents: [PostPage],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
PostPageRoutingModule,
PostPageModule,
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
folder.page.ts (homepage)
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ConstantsService } from '../constants.service';
import { HttpClient } from '@angular/common/http';
import { PostPage } from "../post/post.page";
import { NavController } from '@ionic/angular';
@Component({
selector: 'app-folder',
templateUrl: './folder.page.html',
styleUrls: ['./folder.page.scss'],
})
export class FolderPage implements OnInit {
public folder: string;
title: string;
posts: any[];
constructor(
private activatedRoute: ActivatedRoute,
private constants: ConstantsService,
private http: HttpClient,
private navCtrl: NavController,
private route: Router) {
this.http.get('https://www.googleapis.com/blogger/v3/blogs/byurl?key=' + constants.getApiKey() + '&url=' + constants.getUrl())
.subscribe(data => {
this.title = data.name;
this.getPosts(data.posts.selfLink);
console.log(data);
});
}
getPosts(url: string) {
this.http.get(url + '?maxResults=80' + '&key=' + this.constants.getApiKey())
.subscribe(data => {
this.posts = data.items;
console.log(this.posts);
});
}
ngOnInit() {
this.folder = this.activatedRoute.snapshot.paramMap.get('id');
}
openPost(post) {
this.route.navigate(['post', {post:post}])
}
}
post.page.ts (postpage)
import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';
import { ActivatedRoute } from '@angular/router';
import { FolderPage } from '../folder/folder.page';
@Component({
selector: 'app-post',
templateUrl: './post.page.html',
styleUrls: ['./post.page.scss'],
})
export class PostPage implements OnInit {
private post: any;
constructor(private navCtrl: NavController, private activatedRoute: ActivatedRoute) {
this.activatedRoute.paramMap.subscribe(params => {
this.post = params.posts[+params.get('post')];
console.log(this.post)
});
}
ngOnInit() {
}
}
Using ionic 3 there is no problem when loading parts of the post when clicking on it. But, in ionic 5 i get this error:
ERROR TypeError: Cannot read property ‘NaN’ of undefined