我正在创建一个自定义组件,它从远程源加载 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 ]);
注意不要在组件的 providers
属性中指定 DataProvider
。
关于javascript - 在 ionic 2 中缓存自定义组件内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35987514/