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

}

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

Answer 2

您可以使用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 3

嗯..好像反模式没有？我的意思是使用服务层来处理 UI相关的东西？这就是我试图获得解决方案的原因 TS.你对此有何想法？ - Sampath

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

如果您想这样做，@suraj's answer是我的个人推荐。

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

事件时间表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或单独的函数来抛出/处理错误。

打字稿和多个班级

3 个答案: