1

Consider the example base class below:

import { FormBuilder, FormGroup } from '@angular/forms';
import { NavParams, LoadingController, Loading, Events } from 'ionic-angular';

import { IBaseService } from '../../data/interface/ibase-service';
import { MessageUtil } from '../../message/message-util';

export class FormPage<T> {
    public form: FormGroup;
    public current: T;
    public submitAttempt: boolean;
    public loading: boolean;
    public mode: string;
    public id: number;
    public loader: Loading;

    constructor(public service: IBaseService<T>, 
                public fb: FormBuilder, 
                public events: Events,
                public messageUtil: MessageUtil, 
                public navParams: NavParams,
                public loadingCtrl: LoadingController) {
        let me = this;

        me.mode = navParams.get('mode');
        me.id = navParams.get('id');
    }
}

Now, what I'm trying to do is for the implementing class to only provide/inject the 'service' param w/o the need to pass all other base parameters. Below is the implementing class:

import { Component } from '@angular/core';
import { NavParams, IonicPage, LoadingController, Events } from 'ionic-angular';
import { FormBuilder, FormGroup } from '@angular/forms';

import { MessageUtil } from '../../framework/message/message-util';
import { FormPage } from '../../framework/base/page/form-page';

import { UserService } from '../../providers/user-service';
import { User } from '../../models/user';

@IonicPage()
@Component({
  selector: 'page-edit-user',
  templateUrl: 'edit-User.html',
  providers: [
    UserService,
    MessageUtil
  ]
})
export class EditUserPage extends FormPage<User> {

  //This is the reality
  constructor(public service: UserService, 
              public fb: FormBuilder,
              public events: Events,
              public messageUtil: MessageUtil, 
              public navParams: NavParams, 
              public loadingCtrl: LoadingController) {
    super(service, fb, events, messageUtil, navParams, loadingCtrl); 
  }

  //This is my goal
  constructor(public service: UserService) {
    super(service); 
  }
}

The goal if possible is to not pass all angular and ionic components since they're provided/declared already at the Base class level and that the implementing class should only deal w/ the service to avoid boilerplate code.

Tomislav Stankovic
  • 3,080
  • 17
  • 35
  • 42
Vonzkie
  • 61
  • 4
  • Please take a look at [this SO answer](https://stackoverflow.com/questions/43029212/typescript-and-multiple-classes/43030491#43030491). That is how I handle it in the Ionic Apps I've worked on. – sebaferreras Jul 27 '17 at 10:01
  • 1
    @sebaferreras I like the approach that you did although I'm a little bit concerned if that would make the class susceptible to side effect. Although I saw that you exposed the injected class via public methods w/c would give an impression that they're part of the class inputs. Interesting. – Vonzkie Jul 27 '17 at 10:53
  • Yes, the idea was to avoid all the parameters in the constructor of each page, and also to include some helpers to avoid the need of 10-15 lines of code for things like showing an alert message, and so on. It's not included in that answer, but actually I've defined two base pages: `BasePage` and `UserBasePage`. The later has a guard to check if the user is logged in before entering. So in the `BasePage` I've also added a `redirectTo` helper, to handle the scenario where the user is not logged in, so I catch the return of the guard, and if it's false it shows the login page instead. – sebaferreras Jul 27 '17 at 11:22
  • What kind of side effects do you mean? – sebaferreras Jul 27 '17 at 11:23

1 Answers1

0

The goal if possible is to not pass all angular and ionic components since they're provided/declared already at the Base class level

No, they aren't provided. It is you by calling super(...) who provides the needed components, so you cannot avoid it

Pablo Lozano
  • 10,122
  • 2
  • 38
  • 59