打字稿和多个类

Question

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

子类

    export class EventSchedulePage extends HandleStorageService {

    constructor() {
        super();
         }

     showInvalidTokenAlert() {
       //show alert
      }
  }

抽象类

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

  constructor() {
  }
}

Answer 1

您可以使用showInvalidTokenAlert() 函数创建一个单独的提供程序类

@Injectable()   
export class AlertProvider{
  constructor(){}

  showInvalidTokenAlert(){
  //...
  }
}

在 app.module.ts 中将其设置为提供者，以防您需要作为单例

 @ngModule({
   //...
   providers:[
      AlertProvider,
   //..
   ]
 })

注入您需要的任何组件。

export class EventSchedulePage extends HandleStorageService {

   constructor(private alertProvider:AlertProvider) {
       super();
      }
  //call this.alertProvider.showInvalidTokenAlert()
}

Answer 2

您可以创建一个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');
    }

}

这种方式超级容易添加一些辅助方法。

Answer 3

hmm.. 似乎是反模式不是吗？我的意思是使用服务层来处理 UI相关的东西？这就是为什么我试图根据 TS.你对此有何看法？ – Sampath

在控制器中处理它肯定更像 MVCS（模型-视图-控制器-服务）。但那是widely taken approach。

如果你想去，@suraj's answer 是我个人的推荐。

在控制器上处理警报当然是可能的。继续阅读。

event-schedule-page.service.ts

export class EventSchedulePage extends HandleStorageService {
  // ...
  foo() {
    if (!bar) {
      throw new Error('Something went wrong.');
    }
    // ...
  }
}

home.controller.ts

export class HomeController {
  // ...
  foo() {
    try {
      eventSchedulePageService.foo();
    } catch (error) {
      window.alert(error); // Handle and UI display the error on the controller.
    }
  }
}

要跟进，您可以使用custom error classes 或单独的函数来抛出/处理您的错误。