動態

詳情 返回 返回

Angluar5+ionic3實踐(五) - 動態 詳情

背景:復宏漢霖項目CR做完後.來整理下需要優化的地方和給其他頁面發送消息知識點.

優化項目啓動時間

先記一下:最開始運行的時候所需時間:
image.png
刪完99%的console.log和解決掉所有tslint的報錯後項目跑起來的時間:
image.png

整整少了14.78s.真得不要小看console.log...

發送消息

實際開發場景 : 當前登錄人的信息是保存在主頁面的.最開始登陸進去的時候存入主頁面的,然後其他頁面用到的人員信息是主頁面傳出來的.在其中一個模塊修改了人員崗位後.主頁面沒有重新獲取人員信息.則會導致其他模塊的信息有誤.
解決思路: 在其中一個模塊修改了人員崗位後,給主頁面傳一個消息.告訴它需要重新獲取登錄人的信息.
(其他任意頁面都能通過Events獲取到這個消息)

// 修改人員崗位的模塊代碼內容:

import {Events} from 'ionic-angular';

export class SetupPage {

 constructor(public ev: Events){}
 
 // 崗位切換
 chooseJob = ()=>{
     if (this.territoryList.length <= 1) {
        return;
     }
    let modal = this.modalCtrl.create("ChooseJobPage", { jobList:this.territoryList ,territoryID},{ cssClass: 'inset-modal'});
    modal.onDidDismiss(data => {
     if (data.action == 'save') {
    // 在崗位切換成功後告訴主頁面要重新獲取人員信息
    // 利用this.ev.publish('selectedStff')發消息.
        this.staffService.SelectedTerritoryToken(json).then((info) => {this.ev.publish('selectedStff')})}
    });
    modal.present();
 }
}
// 主頁面代碼內容:

import {Events} from 'ionic-angular';

export class MyApp {

 constructor(public ev: Events){
      // 接收到消息後,去調取獲取人員信息接口
      ev.subscribe("selectedStff", () =>{
         this.getStaffInfo();
     })
 }
 
 // 獲取當前用户信息
 getStaffInfo = () => this.staffService.GetStaffInfo().then((info) => {
    // 重新賦值人員信息
    this.currentStaff = info;
 });
}
user avatar king2088 頭像 thosefree 頭像
點贊 2 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.