弹出警报或操作表后重新加载页面 ionic 2

Question

我正在使用 ActionSheet 和 Alert 弹出窗口中的输入字段在运行时更新数据。为此，我创建了服务 Edit-Users-provider。 我正在删除以前的数据。删除后，我在存储中设置新数据使用 警报中的输入字段。

替换数据

this.storage.remove(entry.Username).then(() => //Removing data
{
    data["Password"] = entry.Password;
    delete data["verifyPass"];
    this.storage.set(data.Username, data).then(() => //Setting data
    {
        this.flashMsg.flashMessage(success);
    }).catch(() =>
    {
        this.flashMsg.flashMessage("Some error occurred!");
    });
});

这是我在存储中存储数据的方法。

changeUserOrDisp(entry)
{
    let changeDispUser = this.alert.create(
    {
        title: "Edit Account",
        subTitle: "Change display name or username or leave the field blank if you don\'t want to change",
        mode: "ios",
        inputs:
        [{type: "password", placeholder: "Enter Password", name: "verifyPass"},
        {type: "text", placeholder: "Enter new display name", name: "Dispname"},
        {type: "text", placeholder: "Enter new username", name: "Username"}],
        buttons:
        [{
            text: "OK",
            handler: (data) =>
            {
                if(data.verifyPass == entry.Password)
                {
                    if(data.Username !== "")
                    {
                        this.isNotDuplicate(data.Username).then((success) =>
                        {
                            if(data.Dispname !== "")
                            {
                                this.storage.remove(entry.Username).then(() => //Here, removing previous data
                                {
                                    data["Password"] = entry.Password;
                                    delete data["verifyPass"];
                                    this.storage.set(data.Username, data).then(() =>
                                    {//Here, Storing new data
                                        this.flashMsg.flashMessage(success);
                                    }).catch(() =>
                                    {
                                        this.flashMsg.flashMessage("Some error occurred!");
                                    });
                                });
                            }
                        }).catch((error) =>
                        {
                            this.flashMsg.flashMessage(error);
                        });
                    }
                }
                else
                    this.flashMsg.flashMessage("Wrong Password");
            }
        },
        {
            text: "Cancel",
            role: "cancel"
        }]
    });
    changeDispUser.present();
}

保存数据后，我想更新 rootPage，即 AdminPage. 问题是，showData() 由于生命周期钩子 ionViewDidLoad() 只会执行一次。

这里是 showUsers() 方法（文件：Admin-Page.ts）。

showUsers()
{
    this.storage.ready().then(() =>
    {
        this.storage.forEach((data, key, iterator) =>
        {
            if(data.Username !== "admin")
                this.usersData.push(data);
        });
    });
}

我在 ionViewDidLoad() 中调用它。（文件：Admin-Page.ts）

ionViewDidLoad()
{
    this.menuCtrl.enable(true, "menu");
    this.menuItems = 
    [
        {title: "log Out", icon: "log-out", method: () => this.logOut()}
    ]
    this.showUsers();
    this.adminData = this.navParams.data;
}

弹出后我应该怎么做才能再次执行showData()？即我的数据得到更新。我试过 ionViewDidEnter() 但这也没有用。

这是整个文件Admin-Page.ts

import { Component } from '@angular/core';
import { SignUpPage } from "../sign-up/sign-up";
import { FlashMessageProvider } from "../../providers/flash-message/flash-message";
import { Storage } from '@ionic/Storage';
import { EditUsersProvider } from "../../providers/edit-users/edit-users";
import { UserAccountPage } from "../user-account/user-account";
import {
    IonicPage,
    NavController,
    NavParams,
    ActionSheetController,
    AlertController,
    ModalController, 
    MenuController} from 'ionic-angular';
import { HomePage } from "../home/home";

@IonicPage()
@Component(
{
    selector: 'page-admin',
    templateUrl: 'admin.html',
})
export class AdminPage
{
    menuItems: Array<{title: string, icon: string, method: () => void}>;
    usersData = [];
    adminData = {Dispname: "", Username: "", Password: ""};
    constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private flashMsg: FlashMessageProvider,
    public storage: Storage,
    public editPanel: ActionSheetController,
    public alert: AlertController,
    private editUsers: EditUsersProvider,
    private modalCtrl: ModalController,
    public menuCtrl: MenuController) {}
    ionViewDidLoad()
    {
        this.menuCtrl.enable(true, "menu");
        this.menuItems = 
        [
            {title: "log Out", icon: "log-out", method: () => this.logOut()}
        ]
        this.showUsers();
        this.adminData = this.navParams.data;
    }
    showUsers()
    {
        this.storage.ready().then(() =>
        {
            this.storage.forEach((data, key, iterator) =>
            {
                if(data.Username !== "admin")
                    this.usersData.push(data);//<--data to show in template
            });
        });
    }
}

这是模板文件Admin-Page.html。

<ion-header>
    <ion-navbar>
        <ion-title>Admin</ion-title>
        <ion-buttons end>
            <button icon-only ion-button (tap) = "addUser()"><ion-icon name = "add"></ion-icon></button>
        </ion-buttons>
        <ion-buttons left>
            <button ion-button icon-only menuToggle><ion-icon name = "menu"></ion-icon></button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <h1 align = "center">
        Welcome Admin
    </h1>
    <ion-list>
        <ion-item *ngFor = "let data of usersData" (press) = "edit(data)" (tap) = "modalUsers(data)">
                {{data.Dispname}}
        </ion-item>
    </ion-list>
</ion-content>
<ion-nav #content id = "content" swpieBackEnabled = "false"></ion-nav>

Answer 1

您可以使用Events API 发布和订阅保存事件并调用所需的方法来检索您的数据。

在您的提供者的构造函数中，注入事件，

constructor(private events:Events){}

在保存功能中，

this.storage.set(data.Username, data)
  .then(() =>
      {//Here, Storing new data
       this.flashMsg.flashMessage(success);
       this.events.publish("Data Saved",data);                              
       }).catch(() =>{
            this.flashMsg.flashMessage("Some error occurred!");
          });

在您的管理页面中注入相同的事件。 在你的ionViewDidLoad()，订阅活动，

ionViewDidLoad()
{
    this.menuCtrl.enable(true, "menu");
    this.menuItems = 
    [
        {title: "log Out", icon: "log-out", method: () => this.logOut()}
    ]
    this.showUsers();
    this.events.subscribe('Data Saved',data => {
        this.showUsers();
        console.log(data);
    });
    this.adminData = this.navParams.data;
}