Question

我正在构建一个Ionic 2 App。我有4个标签。我想在App的开头初始化所有或某些特定的页面/组件。

现在它只是初始化了Dashboard.ts，但其他3个标签页面未初始化。因此，当我点击CcExpire或Customers标签时，它们就会被初始化。

初始化我的意思是调用页面/组件的构造函数，因为我必须更新标志（如标签上方所示）。这些标志取决于各自页面中写入的逻辑。

让我们以CcExpire页面为例。在constructor我订阅事件（由其他页面触发），然后触发另一个事件来更新选项卡。我想我也可以将这些代码复制到其他地方，但这不是一个好主意。以下是

的代码

CcExpire.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController, Events } from 'ionic-angular';
import { Storage } from '@ionic/storage';

import { Customer } from '../../models/customer';

@Component({
  selector: 'page-about',
  templateUrl: 'ccexpire.html'
})

export class CcExpirePage {

  public customersCcExpired: Customer[] = [];

  constructor(public navCtrl: NavController, public alertCtrl: AlertController, public events: Events, public storage: Storage) {

    this.events.subscribe('customerListUpdated', () => {
      this.updateLists();
      console.log("CcExpirePage");
    });

  }

  ionViewWillEnter() {

    this.updateLists();

  }

  updateLists() {
    this.storage.get('customers').then((val) => {

      this.customersCcExpired = [];

      if (val) {

        val.forEach(customer => {

          if (customer.methodOfPayment == "Debit/ Credit Card" && !customer.cardRenewed) {

            // Populate each customers' list w.r.t. respective payment due dates
            var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds 

            const [month, year] = customer.ccExpire.split('/');

            // var dummyDate = new Date("1/" + customer.ccExpire);
            var ccExpireDateLastDay = new Date(year, month, 0);

            var diffDays = Math.round(Math.abs((ccExpireDateLastDay.getTime() - new Date().getTime()) / (oneDay)));

            if (diffDays < 30 && diffDays > -1) {
              this.customersCcExpired.push(customer);
            }
          }
        });
      }

      this.storage.set("ccExpireEventCount", this.customersCcExpired.length).then(() => {

        this.events.publish("updateTabs");
      });

    });
  }

  showConfirm(selectedCustomer: Customer) {
    let confirm = this.alertCtrl.create({
      title: 'Renew',
      message: 'Has customer renewed the credit card?',
      buttons: [
        {
          text: 'No',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Renewed',
          handler: () => {
            console.log('Agree clicked');
          }
        }
      ]
    });
    confirm.present();
  }
}

我相信应该有一些我缺少的配置。如果我可以在应用程序开始时初始化我的组件，请告诉我。

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { CcExpirePage } from '../pages/ccexpire/ccexpire';
import { CustomersPage } from '../pages/customers/customers';
import { DashboardPage } from '../pages/dashboard/dashboard';
import { SettingPage } from '../pages/setting/setting';
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';
import { AddCustomerPage } from '../pages/addcustomer/addcustomer';

import { CustomerService } from '../services/customer.service'

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { CloudSettings, CloudModule } from '@ionic/cloud-angular';
import { IonicStorageModule } from '@ionic/storage';

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': '54074253'
  }
};

@NgModule({
  declarations: [
    MyApp,
    CcExpirePage,
    CustomersPage,
    DashboardPage,
    SettingPage,
    TabsPage,
    LoginPage,
    AddCustomerPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    CcExpirePage,
    CustomersPage,
    DashboardPage,
    SettingPage,
    TabsPage,
    LoginPage,
    AddCustomerPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    CustomerService
  ]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AlertController, LoadingController } from 'ionic-angular';
import { Auth } from '@ionic/cloud-angular';

import { CcExpirePage } from '../pages/ccexpire/ccexpire';
import { CustomersPage } from '../pages/customers/customers';
import { DashboardPage } from '../pages/dashboard/dashboard';
import { SettingPage } from '../pages/setting/setting';
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';
import { AddCustomerPage } from '../pages/addcustomer/addcustomer';

import LoaderUtil from '../utils/loader.util';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public alertCtrl: AlertController, public auth: Auth,
    public loadingCtrl: LoadingController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      // Initialize util classes
      LoaderUtil.init(this.loadingCtrl);

      // TODO: Initialize tab values onload

      this.rootPage = CcExpirePage;

      if (this.auth.isAuthenticated()) {
        this.rootPage = TabsPage;
      } else {
        this.rootPage = LoginPage;
      }

      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

在开始时初始化所有页面/组件

0 个答案: