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

问题描述

我有一个组件类为EventSchedulePage.它扩展了HandleStorageService abstract类如下图.可以看到有一个方法名为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屋！