如何從ionic2中的服務更新頁面？

Question

我有一個名為“用戶數據”的服務，它負責在收到請求時提取“用戶數據”。

我有一個頁面負責顯示“用戶數據”。 頁面加載后，它會獲取數據並顯示。

我有一個菜單，其中包含一些按鈕。 輕觸這些按鈕將向服務“用戶數據”發送請求並修改數據。 修改數據后，我希望頁面收到有關更改的通知並調整頁面。

我要做的是

• 在服務中：發布一個名為“用戶：更改”的事件，並發送修改后的數據

export class UserData{
    users = [];
    ....
    //- if data is changed, 
    //- publish an event
    setUsers(users) {
        this.users = users;
        this.events.publish('user:change', users);
    }
}

• 在頁面中，訂閱以捕獲此事件

export class UserListPage {
    users = [];

    //- subscribe when the page is about to show
    ionViewWillEnter() {
        this.events.subscribe('user:change', this.updateUsers);
    }

    //- subscribe when the page is about to show
    ionViewDidLeave() {
        this.events.unsubscribe('user:change', this.updateUsers);
    }

    //- update
    updateUsers(userEventData) {

        console.log('About to update');
        if (userEventData[0] instanceof Array) {
             this.users = userEventData[0];
        }
        console.log(this.users);
    }

}

在updateUsers函數中，一切正常，除了this.users沒有分配新值。 真奇怪

有時，當我進行調試時，出現類似“嘗試分配給只讀屬性的錯誤”的錯誤信息

你知道為什么嗎？

Answer 1

我可以建議使用Observables代替事件嗎？ 即使您可以通過事件來完成相同操作，但是由於您正在使用服務來獲取數據，因此這將是更好的方法。 在這里，您可以看到此工作插件中的代碼。

因此，通信將是：

Btn / page ---[call the service]---> Service ---[notify other page and send data]---> Page

因此，在該服務中，您可以創建一個可觀察的對象，以便其他頁面可以訂閱它，並在數據准備好時得到通知。

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

@Injectable()
export class UserDataService  { 

  private getDataObserver: any;
  public getData: any;

  constructor() {
    this.getDataObserver = null;
    this.getData = Observable.create(observer => {
        this.getDataObserver = observer;
    });
  }

  public getUserData() {
    // Fake data to send to the page
    let userList = [
      { id: 1, name: 'user01 '},
      { id: 2, name: 'user02 '},
      { id: 3, name: 'user03 '}]

    // This simulates an http request
    setTimeout(() => {
      // The next method will notify all the subscribers and will 
      // send the data.
      this.getDataObserver.next(userList);
    }, 1000);
  }
}    

next(...)方法將通知所有訂戶（在這種情況下為另一頁），並將數據發送給該訂戶。

然后，在另一頁面中，您只需要訂閱該可觀察對象，以便在數據可用時得到通知，並像這樣調用服務：

import { Component } from "@angular/core";
import { UserDataService } from 'service.ts';

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  users: any[];

  constructor(private service: UserDataService) {
      // We subscribe to the observable to be notified when
      // the data is ready
        this.service.getData.subscribe((userList) => {
      this.users = userList;
    });
    }

  public getData(){
    this.service.getUserData();
  }
}

確保在App組件的providers數組中添加UserDataService ，以便在整個應用程序（單個服務）中使用相同的實例。

import { Component } from "@angular/core";
import { ionicBootstrap, Platform } from 'ionic-angular/index';
import { HomePage } from './home.ts';
import { UserDataService } from 'service.ts';

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [UserDataService]
})
export class MyApp {
  constructor(private platform: Platform) {
    this.rootPage = HomePage;
  }
}

ionicBootstrap(MyApp);

Answer 2

我唯一的錯是在單獨的地方編寫處理“ updateUser”的函數。 以下代碼對我有用：

<pre>
export class UserListPage {
    users = [];

    //- subscribe when the page is about to show
    ionViewWillEnter() {
        this.events.subscribe('user:change', (userEventData){
            console.log('About to update');
            if (userEventData[0] instanceof Array) {
                  this.users = userEventData[0];
            }
            console.log(this.users);
        );
    }

    //- subscribe when the page is about to leave
    ionViewDidLeave() {
        this.events.unsubscribe('user:change', ()=>());
    }

}
</pre>