Ionic 4 avoid pages being destroyed

Ionic Framework ionic-v3
1

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]);
    }
}

detail.page.ts

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'app-detail',
    templateUrl: './detail.page.html',
    styleUrls: ['./detail.page.scss'],
})

export class DetailPage {

    private data: any;

    constructor(
        private route: ActivatedRoute,
    ) {}

    ionViewDidEnter()
    {
        if (this.route.snapshot.data.client) {
            this.data = this.route.snapshot.data.client;
        }
    }
}

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>
2

You should design your app so you’re completely oblivious to things like this. It’s the province of the framework, which should be free to cache things and evict them however it sees fit. Why is this a concern and how can we free you from it?

3

Thanks for your feedback. I already looked at the lifecycle events and the routing and I understand that the framework works like this.

4

So then what would make you happy here?

5

On the home page I display a product listing, which also contains images. If a user clicks on one of the

<ion-card class="ion-lister" button (click)="openDetailsWithService(ID)">

element, he will be directed to the detail page and will get more information and another product listing will be loaded. If I now navigate back with

<ion-back-button [routerLink]="'/home'" routerDirection="back"></ion-back-button>

the page will be removed. If I click on the same element again, all/one image(s) are reloaded.

And it’s that kind of behavior that’s giving me a headache.

How can I ensure that image(s) are/is not loaded over the network again but from the WebView cache

EDIT: right now i use

<ion-img [src]="data?.banner"></ion-img>

to display the image.

6

Are you certain this is the problem? I just tried this:


interface Fruit {
  name: string;
  pic: string;
}

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  fruits: Fruit[] = [
    {name: "apple", pic: "https://images-na.ssl-images-amazon.com/images/I/319J7YpfyNL.jpg"},
    {name: "banana", pic: "https://cdn.mos.cms.futurecdn.net/42E9as7NaTaAi4A6JcuFwG-970-80.jpg"},
    {name: "cherry", pic: "https://www.boeschbodenspies.com/wp-content/uploads/2017/08/cherry.png"}
  ];
  selfruit?: Fruit;
}

<ion-content>
    <ion-item>
        <ion-select [(ngModel)]="selfruit">
            <ion-select-option *ngFor="let fruit of fruits" [value]="fruit">{{fruit.name}}</ion-select-option>
        </ion-select>
    </ion-item>

    <div *ngIf="selfruit">
        <img [src]="selfruit.pic">
    </div>
</ion-content>

The first time I cycle through the various fruits, the images are loaded from the network. Thereafter, no matter how many times I choose each, Chrome Developer Tools’ Network tab says that it is loading the images from the disk cache, and does not hit the network at all.

1 Like
7

Are you certain this is the problem? I just tried this:

No, you’re right. Restarting Chrome and recompiling the project fixed the problem. Thanks