class - Ionic 2/Angular 2 如何将父函数移动到扩展类中

Question

我的父组件太大而无法管理，所以我想将函数移动到扩展父组件的独立子类中。

父类包含需要在子类中更新的变量，并且我也已将提供程序注入(inject)到父类中。

    @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

这是行不通的，并且总是因未填充参数或 super 调用失败而失败。执行此操作的正确方法是什么。

/** 更新**/

如果移除注入(inject)器，我总是会收到错误无法解析 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

我认为您必须遵循下面提到的实现。我已经在我的应用中实现了它并且运行良好。

注意:这只是一个结构，请按照您的意愿实现。

您的组件类:

import { eventsInit } from "../../path-for-it";

    export class EventsListComponent extends eventsInit {

      constructor() {
        super();

      }

基类:

 export abstract class eventsInit {


      protected YourMethodName(res: Response) {

      }


    }

更新:

看来你没有关注provider实现的最新变化。你必须在app.module.ts文件中声明它。请看这篇文章:Providers