Ionic 2/Anuglar 2親関数を拡張クラスに移動する方法

Question

親コンポーネントが大きすぎて管理できないため、親を拡張する分離された子クラスに関数を移動したいと考えています。

親クラスには、子クラスで更新する必要がある変数が含まれているだけでなく、親にもプロバイダを注入しています。上記

@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) { 

    } 

は私の親クラスである

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') 
    } 
} 

上記は私の子クラス、これは動作していない、常に移入されていないパラメータによってで失敗している

ですまたはスーパーコールが失敗した。これを行う正しい方法は何ですか。

/**更新**/

の注射を削除した場合、私は常にエラーがeventsInitのすべてのパラメータを解決できません取得します：（、、、、、？？？？？？）。

は、以下の私のメインモジュールである

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

私はあなたが私のアプリでこれを実装しているし、それが正常に動作している下記のimplementation.Iに従わなければならないと思います。

注：これは単なる構造体です。ご希望通りに実装してください。

あなたのコンポーネントクラス：

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

    export class EventsListComponent extends eventsInit { 

     constructor() { 
     super(); 

     } 

基本クラス：

export abstract class eventsInit { 


     protected YourMethodName(res: Response) { 

     } 


    } 

更新：

あなたがprovider実装の最新の変更を踏襲していないようです。よファイル内に宣言しなければなりません。Providers

Answer 2

したがって、拡張クラスロジックを頭に入れて、コードを解読する正しい方法ではないことを理解した後。 @Hostlistenerと@Input変数を持つ属性ベースのディレクティブを使用しました。

親コンポーネントをはるかに小さなセクションに分割し、親コンポーネントがすべての変数を保持し、更新された値をディレクティブに渡せるようにしました。私は、500行以上の1つのコンポーネントから、120を超えない複数のコンポーネントに行きました。読みやすく、テストし、維持するのがずっと簡単でした。