Ionic 2/ Anuglar 2 how to move parent functions into extended classes - class

Question

My parent component is too large to manage so I want to move the the functions into the separated child classes that extend the parent.
The parent class contains variables that need to be updated in the child classes as well as I have injected providers into the parent as well.
#Component({
selector: 'events-list',
templateUrl: 'events-list.html'
})
export class EventsListComponent {
filterString: string;
infiniteScroll: any;
refresher: any;
eventsList: any[];
selectedCategoriesList: [Category];
pageNum: number;
pageSize: number;
searchText: string = '';
noEvents: boolean;
filterSearchText: string;
filterStartDate: string;
filterEndDate: string;
tabsFilterValue: string = 'all'
constructor(
public authSrvc: AuthSrvc,
public calendarSrvc: CalendarSrvc,
public eventsSrvc: EventsSrvc,
public helperSrvc: HelperSrvc,
public locationSrvc: LocationSrvc,
public pushSrvc: PushSrvc) {
}
Above is my parent class
import {Injectable} from '#angular/core';
import {Response} from '#angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/observable/of';
import {Observable} from 'rxjs/Observable';
import {ModalController, LoadingController, NavController, ToastController, Platform} from 'ionic-angular';
import {Storage} from '#ionic/storage';
import {DateFormatPipe} from 'angular2-moment';
import {Category} from '../../../app/app.interfaces';
import * as moment from 'moment';
/** Ionic Native **/
import {GoogleAnalytics} from '#ionic-native/google-analytics';
import {Network} from '#ionic-native/network';
/** Providers **/
import {AuthSrvc} from '../../../../providers/auth-srvc';
import {CalendarSrvc} from '../../../../providers/calendar-srvc';
import {EventsSrvc} from '../../../../providers/events-srvc';
import {HelperSrvc} from '../../../../providers/helper-srvc';
import {LocationSrvc} from '../../../../providers/location-srvc';
import {PushSrvc} from '../../../../providers/push-srvc';
/** Pages **/
import {AuthPage} from '../../../pages/auth/auth-page';
import {EventsListComponent} from '../../../events-components/events-list/events-list';
export class eventsInit extends EventsListComponent {
constructor(
loadingCtrl: LoadingController,
toastCtrl: ToastController,
modalCtrl: ModalController,
navCtrl: NavController,
platform: Platform,
storage: Storage,
ga: GoogleAnalytics,
network: Network,
authSrvc: AuthSrvc,
calendarSrvc: CalendarSrvc,
eventsSrvc: EventsSrvc,
helperSrvc: HelperSrvc,
locationSrvc: LocationSrvc,
pushSrvc: PushSrvc
) {
super(loadingCtrl,
toastCtrl,
modalCtrl,
navCtrl,
platform,
storage,
ga,
network,
authSrvc,
calendarSrvc,
eventsSrvc,
helperSrvc,
locationSrvc,
pushSrvc);
}
ngOnInit()
{
console.log('test')
}
}
Above is my child class
this is not working and is always failing with by parameters not being populated or the super call failing. What is the correct way to do this.
/** Update **/
If removing the injectable I always get the error Can't resolve all parameters for eventsInit: (?, ?, ?, ?, ?, ?).
Below is my main module
import {NgModule, ErrorHandler} from '#angular/core';
import {FormsModule} from '#angular/forms';
import {Ng2ImgFallbackModule} from 'ng2-img-fallback';
import {CloudSettings, CloudModule} from '#ionic/cloud-angular';
import {MomentModule,DateFormatPipe} from 'angular2-moment';
import { IonicStorageModule } from '#ionic/storage';
import {IonicApp, IonicModule, IonicErrorHandler} from 'ionic-angular';
import {EnvironmentsModule} from '../environment_variables/environment_variables.module'
import {AppConfig} from '../app/app.config';
import {MyApp} from '../app/app.component';
/** Ionic Native **/
import {Calendar} from '#ionic-native/calendar';
import { Diagnostic } from '#ionic-native/diagnostic';
import {Facebook} from '#ionic-native/facebook';
import {GooglePlus} from '#ionic-native/google-plus';
import { GoogleAnalytics } from '#ionic-native/google-analytics';
import { Keyboard } from '#ionic-native/keyboard';
import { LaunchNavigator, LaunchNavigatorOptions } from '#ionic-native/launch-navigator';
import {Network} from '#ionic-native/network';
import { SocialSharing } from '#ionic-native/social-sharing';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
/** Pages **/
import {AuthPage} from '../pages/auth/auth-page';
import {EventsPage} from '../pages/events/events-page';
import {EventPage} from '../pages/event/event-page';
import {ProfilePage} from '../pages/profile/profile';
import {SettingsPage} from '../pages/settings/settings';
/** Components **/
//Auth
import {LoginComponent} from '../components/auth-components/login/login';
import {ForgotPasswordDirective} from '../components/auth-components/forgot-password';
import {RegisterComponent} from '../components/auth-components/register/register';
import {SocialComponent} from '../components/auth-components/social/social';
import {WalkthroughComponent} from '../components/auth-components/walkthrough/walkthrough';
//Base
import {SidenavComponent} from '../components/sidenav/sidenav';
import {TimeslotFilterComponent} from '../components/timeslot-filter/timeslot-filter';
import {SettingsComponent} from '../components/settings/settings';
import {EventBookComponent} from '../components/event-book/event-book';
//Events
import {EventsFilterComponent} from '../components/events-components/events-filter/events-filter';
import {EventsListComponent} from '../components/events-components/events-list/events-list';
/** Events Extensions **/
import {eventsInit} from '../components/events-components/events-list/extensions/events-init';
import {EventsItemComponent} from '../components/events-components/events-item/events-item';
//Event
import {AttendeesListComponent} from '../components/event-components/attendees-list/attendees-list';
import {AttendeesItemComponent} from '../components/event-components/attendees-item/attendees-item';
//Profile
import {ProfileComponent} from '../components/profile/profile';
import {ParallaxHeaderDirective} from '../components/parallax-header';
/** Providers **/
import {EventsSrvc} from '../providers/events-srvc';
import {AuthSrvc} from '../providers/auth-srvc';
import {CalendarSrvc} from '../providers/calendar-srvc';
import {HelperSrvc} from '../providers/helper-srvc';
import {LocationSrvc} from '../providers/location-srvc';
import {PushSrvc} from '../providers/push-srvc';
/** Pipes **/
import {LimitToPipe} from '../pipes/limitTo'
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'df0d4e63'
}
};
class NetworkMock extends Network {
get type(): string {
return (super['type'] === null) ? "wifi" : super['type'];
}
}
#NgModule({
declarations: [
MyApp,
AuthPage,
LoginComponent,
ForgotPasswordDirective,
ParallaxHeaderDirective,
RegisterComponent,
SocialComponent,
WalkthroughComponent,
SidenavComponent,
EventsPage,
EventsListComponent,
eventsInit,
EventsItemComponent,
EventsFilterComponent,
AttendeesListComponent,
AttendeesItemComponent,
EventPage,
ProfilePage,
ProfileComponent,
SettingsPage,
SettingsComponent,
TimeslotFilterComponent,
EventBookComponent,
LimitToPipe,
],
imports: [
IonicModule.forRoot(MyApp,
{
backButtonText: 'Back',
backButtonIcon: 'arrow-back',
iconMode: 'md',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabsPlacement: 'bottom',
pageTransition: 'md',
mode: 'md'
}),
IonicStorageModule.forRoot(),
CloudModule.forRoot(cloudSettings),
FormsModule,
MomentModule,
EnvironmentsModule,
Ng2ImgFallbackModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AuthPage,
EventsPage,
EventPage,
ProfilePage,
SettingsPage,
EventBookComponent,
EventsFilterComponent,
SidenavComponent
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},
Calendar,
Diagnostic,
Facebook,
GooglePlus,
DateFormatPipe,
GoogleAnalytics,
Keyboard,
LaunchNavigator,
{ provide: Network, useClass: NetworkMock },
SocialSharing,
StatusBar,
SplashScreen,
EventsSrvc,
AuthSrvc,
CalendarSrvc,
HelperSrvc,
EventsSrvc,
LocationSrvc,
AppConfig]
})
export class AppModule {
}

Answer 1

I think you have to follow below mentioned implementation.I have implemented this in my app and it is working fine.
Note: This is just a structure.Please implement it as you wish.
your component class:
import { eventsInit } from "../../path-for-it";
export class EventsListComponent extends eventsInit {
constructor() {
super();
}
Base class:
export abstract class eventsInit {
protected YourMethodName(res: Response) {
}
}
Update:
It seems you have not followed the latest changes of provider implementation.You have to declare it inside the app.module.ts file.Please see this article: Providers

Answer 2

So after banging the extend class logic into my head and understanding that it wasnt the correct way to break up my code. I went with an attribute based directives with #Hostlistener and #Input variables.
I was able to break up the parent component into much smaller sections and allow the parent component to hold all the variables and pass the updated values to the directives. I went from 1 component over 500 lines to multiple that dont go over 120. Much easier to read, to test and to maintain.