在 ionic 2 中缓存自定义组件内容

Question

我正在创建一个从远程源加载 innerHTML 的自定义组件。我的问题是如何在应用程序加载时加载内容。现在，内容在页面显示时加载，并且在文本出现之前会有一小段延迟。是否有一个事件我可以附加到该组件以在应用程序加载时加载内容？

这是我的组件的样子：

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

}

当我打开应用程序时，我希望该组件加载和使用内容变量，而无需在每次呈现该组件时都调用远程服务。

Answer 1

您可以在您的服务中实现以下机制：

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

您需要为整个应用程序共享您的服务：

bootstrap(AppComponent, [ DataProvider ]);

注意不要在组件的 providers 属性中指定 DataProvider。

Answer 2

您可以实施 canReuse() https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html，这样在离开和返回同一组件时不会重新创建组件实例

或者您可以将该代码移动到一个服务（可能是 DataProvider 或另一个不依赖于 DataProvider 的服务）并注入该服务。服务实例将由包括数据在内的 DI 保持活动状态。

在 ionic 2 中缓存自定义组件内容

Cache custom component content in ionic 2

javascript

ionic2

angular