角度2の別のクラスコンポーネントにクラスをインポート

Question

私のプロジェクトでコードを繰り返しました。

いくつかの値を変更すると、他のコンポーネントとは分かりやすく、より簡単で動的になります。不運にも、私とはうまくいかない。

は、ここで私が上にそれをインポートした...私は、このようなバランスなど、決済などの他のコンポーネントで

Repeated Code: form.ts

export class Form { 
    constructor(){ 
     var today = new Date(), 
      dd = today.getDate(), 
      mm = today.getMonth() + 1, 
      yyyy = today.getFullYear(); 

     if(dd < 10) dd = `0${dd}`; 
     if(mm < 10) mm = `0${mm}`; 

     today = `${yyyy}-${mm}-${dd}`; 

     this.balance.dateTo = today; 
    } 

    public balance = { 
     viewBy: 'Ad1', 
     companyUnit: 'DEPED', 
     financialYear: '2016', 
     clients: 'Dummy Text 1' 
    }; 
} 

持っているもの

です。

import { Form } from '../form'; // path is correct 

export class BalanceComponent { 
    form: Form;     // I am not sure of it 
            // this is the place I want to import repeated class 
    search_data(balance){ 
     console.log(balance); 
    } 
} 

systemjs.config.js

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 
     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     'ng2-pagination': 'npm:/ng2-pagination', 
     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 
    }, 

    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     }, 
     'angular-in-memory-web-api': { 
     main: './index.js', 
     defaultExtension: 'js' 
     }, 
     'ng2-pagination': { 
     main: 'index.js', defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

Answer 1

を今、あなたはあなたのフォームオブジェクトをinitialzieする必要があります。ここでは

は、私がしようとしているものです。

export class BalanceComponent { 
    form: Form; 

    constructor() { 
     this.form = new Form(); 
    } 
} 

この値をコンポーネント間で共有する場合は、サービスを作成してコンポーネントに挿入することをお勧めします。

export class BalanceComponent {  
    constructor(private formService:FormService) {} 
} 

private formService:FormServiceがコンストラクタ内にあるとします。後でthis.formServiceのようにこの変数にアクセスすることができます。

@Injectable() 
export class FormService { 
    constructor(){ 
     var today = new Date(), 
      dd = today.getDate(), 
      mm = today.getMonth() + 1, 
      yyyy = today.getFullYear(); 

     if(dd < 10) dd = `0${dd}`; 
     if(mm < 10) mm = `0${mm}`; 

     today = `${yyyy}-${mm}-${dd}`; 

     this.balance.dateTo = today; 
    } 

    public balance = { 
     viewBy: 'Ad1', 
     companyUnit: 'DEPED', 
     financialYear: '2016', 
     clients: 'Dummy Text 1' 
    }; 
} 

サービスが共有モジュールにある場合は、複数のインスタンスを取得する可能性があります。モジュールをModule.forRootに設定することをお勧めします。

慣例により、forRoot静的メソッドは、同時にサービスを提供し、設定します（ ）。それはサービス構成オブジェクトをとり、 はModuleWithProvidersを返します。

約Docです。

ルートアプリケーションモジュールのAppModuleでのみforRootを呼び出します。 を他のモジュール、特に遅延ロードされたモジュールで呼び出すと、意図に反して となり、ランタイムエラーが発生する可能性があります。

結果をインポートすることを忘れないでください。他の@NgModule リストに追加しないでください。

@NgModule({ 
    imports: [CommonModule], 
    declarations: [BalanceComponent], 
    exports: [BalanceComponent] 
}) 
export class SharedModule { 
    static forRoot(): ModuleWithProviders { 
     return { 
      ngModule: SharedModule, 
      providers: [FormService] 
     }; 
    } 
} 

次にインポートモジュールは、次のようになります。

@NgModule({ 
    imports: [ 
    /** other modules import **/ 
    SharedModule.forRoot(), // you can also pass some config here if needed 
    routing 
    ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }