打字稿和多个班级 [英] Typescript and multiple classes

问题描述

我有一个组件类 EventSchedulePage 。它扩展 HandleStorageService abstract class如下所示。你可以看到在这个子类上有一个名为 showInvalidTokenAlert（）的方法。我必须在每个组件中调用此方法（这个方法向用户提供基于令牌的错误消息。。那么你能告诉我如何实现或重新设计我的类以满足这种情况吗？因为我不想在每个组件上放置 showInvalidTokenAlert（）。我想将该方法的实现保留在一个地方。

I have a component class as EventSchedulePage.It extends HandleStorageService abstract class as shown below.You can see that there is a method named showInvalidTokenAlert() on this subclass.I have to call this method each and every component(This method gives a token based error message to the user).So can you tell me how to implement or redesign my classes to cater this situation? 'cause I don't like to put showInvalidTokenAlert() on each and every component.I would like to keep that method's implementation on a single place.

子类

    export class EventSchedulePage extends HandleStorageService {

    constructor() {
        super();
         }

     showInvalidTokenAlert() {
       //show alert
      }
  }

抽象类

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

  constructor() {
  }
}

推荐答案

您可以创建一个 BasePage ，并将所有共享代码放在那里。

You could create a BasePage, and put there all the shared code.

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方法，每个实例只需从进样器获取一次。

The key is that the BasePage receives an instance of the injector from the subclass, so you could obtain any instance that you need from it (like the AlertController instance that you need to show an alert message). By using the get methods, each instance will be obtained from the injector just once.

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

And then in all the pages from your app:

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');
    }

}

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

This way is super easy to add some more helper methods.

这篇关于打字稿和多个班级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！