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

我正在创建一个自定义组件，从远程源加载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')
        );
    }

}

---

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

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

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

---

注意不要在组件的

提供程序

属性中指定

数据提供程序

。

您可以实现

canReuse（）

，这样在离开或返回同一组件时不会重新创建组件实例

---

或者，您可以将该代码移动到一个服务（可能进入

DataProvider

或另一个依赖于no

DataProvider

的服务）中，然后注入该服务。服务实例将由DI（包括数据）保持活动状态。

它需要在组件级别实现，因为数据提供程序在多个位置使用，并且加载不同的数据，我不想缓存它。好的！有道理！您的组件使用路由吗？我使用的是ionic 2，这两个方面我都是新手，我在ionic 2演示应用程序和文档中没有看到bootstrap（）声明。你知道我如何在爱奥尼亚2上提供全球范围的服务吗？我没有在ionic 2中使用路由。因此请使用主组件的

providers

属性。由于层次结构，它将与其他组件共享…您可以做一些事情，因为组件将在每次使用时实例化。@Günter的解决方案允许您保留相同的实例，但它仅适用于路由

@CanActivate

也可能是您要查找的内容，但它也在路由上下文中。在您的情况下，唯一的方法是将我的解决方案与@Günter在这个问题中提出的方案相结合。。。（如果您希望这样：“在每次呈现组件时不调用远程服务”）重用听起来不错，但在加载整个应用程序时如何加载它？现在，当我导航到html中存在该组件的页面时，它会加载。您可以保持原样。当您稍后导航回组件时，一切都应该保持原样（不再调用构造函数）。在Ionic 2中，您知道我需要导入什么才能使CanReuse、OnReuse工作吗？现在我得到：找不到名称“OnReuse”。我不知道。在TS中，

OnReuse

来自

angular2/router

。如果在Ionic中不支持这一点，只需向组件添加一个方法

routerCanReuse（下一步：ComponentInstruction，上一步：ComponentInstruction）{return true；}

。（您还可以从参数中删除类型，这样就不需要再导入它们了。另请参见此示例的

routernoreuse（）

因此您可以在重用时进行一些额外的初始化。我认为这不起作用，我能够实现它们，但它们从未启动。我想这是因为Ionic 2没有使用路由，而是使用导航组件移动到页面。