Hi, i’m new to Ionic 4 and i’m stuck with this Problem:
When I call up a page and navigate back, the visited page is removed from the DOM.
Do i’m missing some configuration to prevent this behaviour?
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DetailPageResolver } from './resolver/detail-page-resolver';
const routes: Routes = [
{
path: 'detail/:id',
resolve: {
client: DetailPageResolver
},
loadChildren: () => import('./pages/detail/detail.module').then(m => m.DetailPageModule)
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule {}
home.page.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { Platform } from '@ionic/angular';
import { DetailPageService } from '../../services/detail-page.service';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
// DEMO DATA
client = [
{
name: 'Test 0',
stars: 4,
ratings: 130,
logo: 'https://www.eeeat.de/demo_bilder/alhamra_logo.png',
banner: 'https://www.eeeat.de/demo_bilder/alhamra_banner.jpg'
},
{
name: 'Test 1',
stars: 3,
ratings: 217,
logo: 'https://www.eeeat.de/demo_bilder/datscha_logo.png',
banner: 'https://www.eeeat.de/demo_bilder/datscha_banner.jpg'
}
];
//
constructor(
private platform: Platform,
private nativeStorage: NativeStorage,
private router: Router,
private detailPageService: DetailPageService,
) {}
ngOnInit(): void
{
// do some stuff here
}
openDetailsWithService(id)
{
this.detailPageService.setData(id, this.client[id]);
this.router.navigate(['/detail/' + id]);
}
}
home.page.html
<ion-card class="ion-lister" button (click)="openDetailsWithService(0)">...</ion-card>
<ion-card class="ion-lister" button (click)="openDetailsWithService(1)">...</ion-card>
detail.page.html
<ion-back-button [routerLink]="'/home'" routerDirection="back"></ion-back-button>