打字稿和多个类

Question

我有一个组件class作为EventSchedulePage。它扩展HandleStorageServiceabstractclass如图below.You可以看到有subclass.I 上名为 showInvalidTokenAlert() 的方法必须在每个组件中调用此方法（此方法向用户提供基于令牌的错误消息）。那么你能告诉我如何实现或重新设计我的 class是为了迎合这种情况吗？因为我不想把 showInvalidTokenAlert() 放在每个 component.I 上，我想把那个方法的实现放在一个地方。

子class

    export class EventSchedulePage extends HandleStorageService {

    constructor() {
        super();
         }

     showInvalidTokenAlert() {
       //show alert
      }
  }

摘要class

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

  constructor() {
  }
}

Answer 1

您可以使用 showInvalidTokenAlert() 函数

创建单独的提供程序 class

@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.. It seems anti-pattern no? I mean using service layer to handle UI related things? That is why I tried to get the solution based on TS.What is your thoughts about this? – Sampath

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

如果你想去，是我个人的建议。

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

活动日程-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 或单独的函数来抛出/处理您的错误。

打字稿和多个类

Typescript and multiple classes

typescript

ionic2

ionic3

angular

打字稿和多个 类

Typescript and multiple classes

typescript

ionic2

ionic3

angular

打字稿和多个类