2017-08-26 12 views
0

角型モジュールにTypeScriptクラスをインポートして、そのモジュール内のすべてのコンポーネントまたはサービスがこれらの定義を継承するような推奨される方法はありますか?TypeScriptクラスを中心にAngular Moduleにインポートするにはどうすればよいですか?

コアの問題はです。なぜ、モジュールにインポートされたクラスは、そのモジュール内の他のコンポーネントに自動的にインポートされませんか?

私はこのようなモジュールにクラスをインポートしようとしている:

registration.model.ts:

export class Event { 
    id: string; 
    name: string; 
} 

registration.module.ts:

import { Event } from './registration.model'; 

を私も持っていますそれをモジュールの宣言に加えました。(何もしなかったとすぐに、宣言配列からこれを削除しました):

declarations: [ 
    Event, 
    ... 
] 

registration.service.ts:

getEvents(): Observable<Event[]> { 

    return this.http.get(`api/events`) 
    .map(response => response.json()); 

} 

はこのエラーを生成し、アプリがコンパイルに失敗します。 Cで

ERROR:/コード/登録/ srcに/アプリ/登録/registration.service.ts (26,29):「イベント」という名前を見つけることができません。

私が直接registration.service.tsへのインポートを追加した場合、エラーが消えると、すべてが正常にコンパイルされます。

import { Event } from './registration.model'; 

私は、相対パスがモジュールに正しいことを確認しました。私はモジュールの絶対パスに変更することができますし、サービスで同じエラーが発生します。

フォローアップ編集 アドリアンの反応のおかげで、私はこれをもっとよく理解しています。私はまた、次のように活字体モジュールから、一度に複数のクラスをインポートすることができていることが分かった:

import * as Registration from 'app/models/registration.model'; 

答えて

1

Eventクラスをインポートします。アプリケーションの他の部分でEventモデルクラスを使用するには、それらをそれぞれ別々にインポートする必要があります。 NgModuleを使用するかどうかは関係ありません。

NgModuleはAngular compilerによって使用されますが、そのステップに入る前に、TypeScriptコンパイラがコードを処理する必要があります。あなたはモジュール(おそらくパスは、それぞれの場合に異なる場合があります)であなたがやったように、それをインポートする必要があり、この使用したいすべてのファイルで

import { Event } from './registration.model'; 

をそれ以外の活字体はありません持っていますイベントとは何か、それをどこから得るかというアイディアです。

+0

詳細な対応をありがとうございます。 – Graham

0

エラー自体は、問題があなたの相対的である名前のイベントに

を見つけることができないと言いますパス。相対パスは、情報目的のために正しい


ではありません。

declarations metadata propertyEvent classを言及する必要はありません。クラスはクラスが@Component decoratorで定義されている場合Angular context意味で何かを持っているときは、declaration arrayで何かを言及する必要があります。

あなたは純粋な活字体クラスを使用しているのでちょうどこれは、それがどのように動作するかではありませんregistration.service.ts

registration.service.ts

import { Event } from './registration.model or correct relative path'; 

getEvents(): Observable<Event[]> { // Now Event[] is declared and will not issue any error. 

    return this.http.get(`api/events`) 
    .map(response => response.json()); 

} 
+0

私の質問の最後の数行を見てください。サービスに直接インポートすることができます。私の質問に答えていない。 – Graham

+0

それからあなたは相対的なパスに問題があるようです。相対パスが正しくありません。 – micronyks

+0

モジュールとサービスが両方とも同じディレクトリにあることを100%肯定します。そうでないと、インポートを追加するとサービスが機能しなくなります。 VSコードは、モジュール内のインポートステートメントにもエラーを表示していません。 – Graham

関連する問題