当 Ionic 2 中的值发生变化时检索本地存储值

Question

我正在使用 ionic 2 框架，并尝试使用本地存储来存储网络状态

this.local = new Storage(LocalStorage);
this.local.set("status", this.status);

有两个值可以动态分配给状态，“强”和“弱”。

---

我能够在每个页面初始化时获取我的本地存储“状态”值的初始值。

toCheckStatus();
function toCheckStatus()
{
    self.local = new Storage(LocalStorage);
    self.local.get('status').then((value) => 
    {
        console.log("status", value);
    });
}

这将返回一个“强”或“弱”，这正是我想要的，但是否有任何方法或事件可以动态（在“状态”值更改时）调用“toCheckStatus()”函数？

工作流程示例（伪代码）：

1. 在应用程序启动时 -> 检查互联网状态（后台将不断检查并更新本地存储值）
2. 将状态存储到本地存储
3. 调用函数获取值（我的值变化时如何动态调用这个函数，有什么方法吗？）
4. 如果状态为弱 -> 显示弱图标
5. 如果状态为强 -> 显示强图标

Answer 1

当我的值发生变化时如何动态调用这个函数，有什么方法吗？

更好的解决方案是使用observables。您可以在方法中使用observables 在属性更改时发出事件，然后执行您需要执行的代码。

这是一个非常简单的使用observables的例子：

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class StorageService {

    private storageObserver: any;
    public storage: any;

    constructor(...) {
        this.storageObserver= null;

        this.storage= Observable.create(observer => {
            this.storageObserver= observer;
        });
    }

    public yourMethod(): void { 

        // This method changes the value of the storage
        // ...

        // Notify to the subscriptor that the value has changed
        this.storageObserver.next(newValue);
    }

然后在你的页面中：

@Component({
  templateUrl: 'build/pages/my-new-page/my-new-page.html',
  providers: [..., StorageService ]
})
export class MyNewPage {

    constructor(..., private storageService : StorageService ) {

        // Initialize all the things you need
        // ... 

        this.storageService.storage.subscribe((newValue) => {
                // This code will execute when the property has changed and also
                // you'll have access to the object with the information that
                // your service sent in the next() call.
                this.doWhatYouWant(newValue);
        });
    }
}

============================================

编辑：

如果您需要更新视图中的某些内容，因为后台发生了更改，您必须让 Angular 知道该更改。一种方法是使用Zones。您可以查看我的答案here 以了解如何操作。

Answer 2

这可以通过 BehaviorSubject 以及 Ionic 的 Storage 模块来实现。

创建一个 BehaviorSubject，每当您在 Storage 中设置键时调用 .next() 并订阅该 BehaviorSubject 以获取更新的值。

这样的代码示例：

let storageObserver = new BehaviorSubject(null)

this.storage.set("key", "data")
storageObserver.next(null)

setTimeout(() => {
  this.storage.set("key", "new data")
  storageObserver.next(null)
}, 5000)

storageObserver.subscribe(() => {
  this.storage.get("key")
    .then((val) => console.log("fetched", val))
})

这将在本地存储中设置一个密钥，该密钥将记录到控制台，并在 5 秒后异步更新该密钥，然后再次记录到控制台。您可以重构键的设置并将 BehaviorSubject 更新为函数。

Answer 3

投票就足够了吗？这可能不是最干净的方式，但它会获得您需要的数据。

setInterval(function() {
  // Check localStorage every 2 seconds
}, 2000);