Cache custom component content in ionic 2

Question

I am creating a custom component which loads the innerHTML from a remote source. My question is how can i load the content when app loads. Right now, the content loads when the page shows and its a small delay until the text appears. Is there an event i can attach to that component to load the content when the app loads?

This is how my component looks like:

import {Component} from 'angular2/core'
import {DataProvider} from '../../providers/DataProvider'

@Component({

    'selector': 'ck-tos',
    templateUrl: 'build/directives/ckTos/ckTos.html',
    providers: [[Cashklick]],
})

export class ckTos {

    content: String = "";

    constructor(private DataProvider: DataProvider) {

        DataProvider.load('pages', 'terms').subscribe(
            data => {

                let response = data.json();
                if (response.content)
                    this.content = response.content;
                else if (response.error)
                    this.content = response.error;
                else
                    this.content = "Error: Unable to get any data ...";

            },
            err => {this.content = "Error: Unable to get any data ...";},
            () => console.log('DataProvider service for page terms completed')
        );
    }

}

When i open the app, i want this component to have content variable loaded and used without calling the remote service each time the component is rendered.

Thierry Templier · Accepted Answer · 2016-03-14 12:42:15Z

1

You could implement the following mechanism into your service:

export class DataProvider {
  constructor(private http:Http) {
  }

  load() {
    if (this.data) {
      return Observable.of(this.data);
    } else {
      return this.http.get(...)
                 .map(...)
                 .do(data => {
                   this.data = data;
                 });
  }
}

You need to share your service for the whole application:

bootstrap(AppComponent, [ DataProvider ]);

Be careful not to specify DataProvider within the providers attribute of your components.

edited Mar 14, 2016 at 12:42

answered Mar 14, 2016 at 12:39

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

keepwalking Over a year ago

It needs to be implement at the component level, since the DataProvider is used in multiple locations and it loads different data, i don't want to cache that.

Thierry Templier Over a year ago

Okay! Make sense! Do you use routing for your components?

keepwalking Over a year ago

I am using ionic 2 and i am quite new on both, i don't see a bootstrap() declaration inside ionic 2 demo apps and documentation. You have any idea how can i make that service globally on Ionic 2? I am not using routing in ionic 2.

Thierry Templier Over a year ago

So use the providers attribute of your main component. Because of hierarchical injectors, it will be shared with other components...

Thierry Templier Over a year ago

You can do something because components will be instantiated each time you use them. The @Günter's solution allows you to keep the same instance but it only applies with routing... @CanActivate could also be what you're looking for but it's also in the context of routing. In your case, the only way is to mix my solution with what @Günter proposes in this question... (if you want this: " without calling the remote service each time the component is rendered")

|

Günter Zöchbauer · Accepted Answer · 2016-03-14 12:39:44Z

1

You can either implement canReuse() https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html so the component instance isn't recreated when navigating away from and back to the same component

or you you can move that code to a service (probably into DataProvider or another service that depends no DataProvider) and inject that service instead. The service instance will be kept alive by DI including the data.

answered Mar 14, 2016 at 12:39

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

6 Comments

keepwalking Over a year ago

Reuse sounds good, but how can i load it when the entire apps loads? Right now it loads when i navigate to the page where that component is present inside the html.

Günter Zöchbauer Over a year ago

You keep it like it is. When you later navigate back to the component, everything should be as it was left (constructor not called again).

keepwalking Over a year ago

In Ionic 2 do you have any idea what i need to import in order for CanReuse, OnReuse to work? Right now i am getting: Cannot find name 'OnReuse'.

Günter Zöchbauer Over a year ago

I don't know Ionic. In TS it's OnReuse from angular2/router. If this isn't supported in Ionic, just adding a method routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; } to your component should do. (you also can remove the types from the parameters so you don't need to import them as well. See also this example github.com/angular/angular/blob/… also the routerOnReuse() so you can do some additional initialization on reuse.

keepwalking Over a year ago

I don't think this is working, i was able to implement them but they never fire. I guess this is since Ionic 2 is not using Routing, its using a navigation component to move to pages.

|

Collectives™ on Stack Overflow

Cache custom component content in ionic 2

2 Answers 2

6 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related