在离子二级缓存自定义组件的内容 [英] Cache custom component content in ionic 2

问题描述

我创建从一个远程源加载的innerHTML的自定义组件。我的问题是我怎么能当应用程序加载时加载内容。眼下，当页面显示了其短暂的延迟，直到出现内容加载的文本。是否有一个事件，我可以附加到组件来加载内容时，应用程序加载？

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?

这是我的组件的样子：

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.

推荐答案

您可以实现以下机制为您服务：

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

要小心，不要指定组件的DataProvider 的提供商在属性。

这篇关于在离子二级缓存自定义组件的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！