Typoskript und mehrere Klassen

Question

Ich habe eine Komponentenklasse als EventSchedulePage .Es erstreckt HandleStorageServiceabstract Klasse als below.You siehe gezeigt, dass es ein Verfahren showInvalidTokenAlert() auf dieser subclass.I benannt ist haben diese Methode jede einzelne Komponente nennen (Diese Methode gibt dem Benutzer eine tokenbasierte Fehlermeldung. Können Sie mir sagen, wie ich meine Klassen implementieren oder umbauen kann, um dieser Situation gerecht zu werden? Denn ich mag es nicht, showInvalidTokenAlert() auf jede Komponente zu setzen. Ich möchte die Implementierung dieser Methode an einem einzigen Ort behalten.

Subclass

export class EventSchedulePage extends HandleStorageService { 

    constructor() { 
     super(); 
     } 

    showInvalidTokenAlert() { 
     //show alert 
     } 
    } 

abstrakte Klasse

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

    constructor() { 
    } 
} 

Answer 1

Sie könnten eine BasePage erstellen und alle gemeinsamen Code setzen dort.

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

} 

Der Schlüssel ist, dass die BasePage eine Instanz des Injektors aus der Unterklasse empfängt, so könnten Sie eine Instanz erhalten, die Sie von ihm brauchen (wie die AlertController Instanz, die Sie eine Warnmeldung zeigen müssen). Bei Verwendung der Get-Methoden wird jede Instanz nur einmal vom Injektor abgerufen.

Und dann in allen Seiten Ihrer 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'); 
    } 

} 

Auf diese Weise ist super einfach einige weitere Hilfsmethoden hinzuzufügen.

Answer 2

Sie können mit der Funktion showInvalidTokenAlert()

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

    showInvalidTokenAlert(){ 
    //... 
    } 
} 

Set es in App eine separate Provider-Klasse erstellen. module.ts als Provider für den Fall, dass Sie als Singleton benötigen

In jede Komponente injizieren, die Sie benötigen.

export class EventSchedulePage extends HandleStorageService { 

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

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

Es ist auf jeden Fall mehr MVCS-like (Model-View-Controller-Service), dass in der Steuerung zu handhaben. Aber das ist ein widely taken approach.

Wenn Sie wollen, ist @suraj's answer meine persönliche Empfehlung.

Handhabung Warnungen auf dem Controller ist sicherlich möglich. Weiter lesen.

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

Um zu folgen, können Sie custom error classes oder separate Funktionen verwenden, um Ihre Fehler auswerfen/handhaben.