2

私は Angular 2 の初心者で、機能モジュールからクラスをエクスポートしてメイン モジュールにインポートする方法を理解しようとしています。

これを typescript でコンパイルしようとすると、次の 2 つのエラーが表示されます。

  • app/app.component.ts(11,21): エラー TS2304: 名前 'AddService' が見つかりません。

  • app/app.module.ts(4,9): エラー TS2305: モジュール '"C:/angular/app/add/arithmetic.module"' には、エクスポートされたメンバー 'AddService' がありません。

私のツリーは単純です:

/
  index.html
  package.json
  systemjs.config.js
  tsconfig.json
  typings.json
  app/
     app.component.html
     app.component.ts
     app.module.ts
     main.ts
     add/
        add.service.ts
        arithmetic.module.ts

興味深い部分は次のとおりです。

app.module.ts:

import {NgModule}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent}   from './app.component';

// this next line generates an error from typescript compiler:
// app/app.module.ts(4,9): error TS2305: Module
// '"C:/angular/app/add/arithmetic.module"' has no exported 
// member 'AddService'.

import {AddService} from './add/arithmetic.module';

@NgModule({
    imports:        [BrowserModule],
    declarations:   [AppComponent, AddService],
    bootstrap:      [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';    

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {

    calculate() {
        // this next line generates the error:
        // app/app.component.ts(11,21): 
        // error TS2304: Cannot find name 'AddService'.
        var c = new AddService();

        var x = c.addTwoNumbers(3, 5);
        console.log(x);
    }
}

算術モジュール.ts

import {NgModule}            from '@angular/core';
import {CommonModule}        from '@angular/common';
import {AddService}          from './add.service';

@NgModule({
  imports: [CommonModule],
  exports: [AddService]
})
export default class ArithemeticModule { }

add.service.ts

export class AddService {
    addTwoNumbers(a: number, b: number) : number {
        return a + b;
    } 
}

これは本当にイライラするので

1) AddService をエクスポートしています。これは「エクスポート」としてマークされており、ArithmeticModule 内から @NgModule メタデータを使用してエクスポート済みとしてマークしています。

2) メイン モジュール内から [おそらく] エクスポートされた AddService クラスをインポートしているので、ArithmeticModule からエクスポートされるため、AddService を使用できるはず

AddService をコンポーネント内から直接インポートすると問題なく動作しますが、それは目的ではありません。Angular のモジュールの場合と同様に、メイン モジュールからクラスをインポートし、そのモジュールからのエクスポートを利用したいと考えています。 (例: BrowserModule および FormsModule)。@NgModule のドキュメントには、機能モジュールからメイン モジュールに 1 回インポートすれば、メイン モジュール全体で使用できるようになるはずだと書かれています。

誰かが私が間違っていることを教えてもらえますか? それとも、どのモジュールが使用されることになっているのか誤解していますか?

4

2 に答える 2

11

サービスが使用する場合providers: [...]、それらはルート インジェクターに追加されます (遅延ロードされていないモジュールから)。

exports: []ディレクティブ、コンポーネント、およびパイプと、ディレクティブ、コンポーネント、およびパイプをエクスポートするモジュール用です。

于 2016-09-25T18:09:42.640 に答える