打字稿和多个类

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.你对此有何看法？- 桑帕斯

在控制器中处理它肯定更像MVCS(模型-视图-控制器-服务(。但这是一种广泛采用的方法。

如果你想去做，@suraj的回答是我个人的建议。

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

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.
    }
  }
}

为了跟进，您可以使用自定义错误类或单独的函数来抛出/处理错误。