打字稿和多个类

Question

我有一个组件类，EventSchedulePage它扩展了 HandleStorageService abstract类，如下所示。您可以看到有一个showInvalidTokenAlert()在该子类上命名的方法。我必须为每个组件调用此方法（此方法向用户提供基于令牌的错误消息） 。那么您能告诉我如何实现或重新设计我的课程以适应这种情况吗？因为我不想把showInvalidTokenAlert()每个组件都放在上面，我想将该方法的实现放在一个地方。

子类

    export class EventSchedulePage extends HandleStorageService {

    constructor() {
        super();
         }

     showInvalidTokenAlert() {
       //show alert
      }
  }

抽象类

export abstract class HandleStorageService {
  result: string = '';

  constructor() {
  }
}

Answer 1

您可以创建一个BasePage，然后在其中放置所有共享代码。

import { Component, Injector } from '@angular/core';
import { AlertController, ...} from 'ionic-angular';

@Component({ selector: '', template: '<span></span>' })
export class BasePage {

    private _alertCtrl: AlertController;
    private _toastCtrl: ToastController;

    constructor(public injector: Injector) { }

    // Get methods used to obtain instances from the injector just once
    // ----------------------------------------------------------------

    // AlertController
    public get alertCtrl(): AlertController {
        if (!this._alertCtrl) {
            this._alertCtrl = this.injector.get(AlertController);
        }
        return this._alertCtrl;
    }

    // ToastController
    public get toastCtrl(): ToastController {
        if (!this._toastCtrl) {
            this._toastCtrl = this.injector.get(ToastController);
        }
        return this._toastCtrl;
    }

    // ...

    // Helper methods
    // ----------------------------------------------------------------

    public showAlertMessage(message: string): void {
        let alert = this.alertCtrl.create({ ... });
        alert.present();
    }

    public showToastMessage(message: string): void {
        let toast = this.toastCtrl.create({ ... });
        toast.onDidDismiss(() => {
            console.log('Dismissed toast');
        });
        toast.present();
    }

}

关键在于，BasePage接收器从子类接收注入器的实例，因此您可以从该子类中获取所需的任何实例（AlertController例如需要显示警报消息的实例）。通过使用get方法，将仅从注入器获取一次每个实例。

然后在您应用的所有页面中：

import { Component, Injector } from '@angular/core';
import { BasePage } from '../path/to/base';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage extends BasePage {

    constructor(public injector: Injector) {
        super(injector);
    }

    public someMethod(): void {
        // You can use the methods from the BasePage!
        this.showAlertMessage('Your message...');
    }

    public someOtherMethod(): void {
        this.showToastMessage('Another message');
    }

}

这种方式非常容易添加一些辅助方法。