2016-03-17 9 views
5

非@Injectableクラスを注入:2.0.0-beta.9をAngular2:角度

componentに非@Injectableクラスを注入することが可能ですか?たとえば、このクラスはサードパーティのライブラリから取得できます。

答えて

7

はい、可能です。実際には@Injectableデコレータは、クラスが他のクラスに注入可能であることを指定するのではなく、そのコンストラクタのレベルで何かを注入したいということです。

クラスに何かを注入したくない場合は、@Injectableデコレータを追加することは必須ではありません。このクラスは他のクラスに注入できます。

私はこのGithubの問題はあなたを助けることができると思う:

ここで重要なことはデコレータと注釈の違いを理解することです。ここでは、このテーマに関する素晴らしい記事です:

2

私ははい、それは可能だと思います。私は@Injectableデコレータなしでそれをテストし、正常に動作します。

plunker

AuthService.ts

import {Injectable} from 'angular2/core'; 
import {Http, Response,HTTP_PROVIDERS} from 'angular2/http'; 
import 'rxjs/Rx'; 
import {Observable} from 'rxjs/Observable'; 

export interface sharedObject{ 
    firstName:string; 
    lastName:stirng; 
} 


export class AuthService{ 
    user:sharedObject; 
    constructor() 
    { 
    console.log('AuthService started') 
    this.user={firstName:"micronyks",lastName:"shah"}; 
    } 

    change() { 
    console.log('change to angular2'); 
    this.user.firstName="micronyks1"; 
    this.user.lastName="shah1"; 
    }  
} 

あなたには、いくつかのクラスは、コンストラクタでDIを使用しているので、不思議と@Injectable()を使用しない場合。これは@を装飾しているため、たとえば@Componentsです。

HeroesComponentには、依存関係も組み込まれています。なぜ私は @ Injectable()をHeroesComponentに追加しないのですか?

本当にしたい場合は追加できます。 HeroesComponentが@Componentで既に装飾されているため、これは必要ではありません。 TypeScript は、デコレータを持つ任意のクラスのメタデータを生成し、デコレータ はこれを行います。クラスが依存関係を持っている場合

詳細情報については、あなたがまだDIでそれを使用することができ、このlink Angular page

+0

オハイオ州の提案に感謝します。しかし、今誰かが私の答えがあなたのコメントを参照しても正しい方向になるだろう:-)好きなら – micronyks

+0

ああ偉大な男!私の答えを編集して、angular.ioにリンクしてみませんか?私はあなたの編集を受け入れます:-)。私はいくつかの仕事に取り組んでいるので、すぐに期待通りにはできません。 :-) – micronyks

+0

問題はありませんが、確かに私の英語は非常に悪いので、あなたは私よりもうまくやることができます、あなたは幸運が気に入らなければ、見直して編集することができます –

1

を読むことができます。あなたは、それ自体が依存関係(コンストラクタ引数)を持っているが、その後、あなたが

代わりに工場を使用することができ、したくないか、 @Injectable()を適用することはできませんというクラスを注入することができるようにしたい場合は、単にそれ

のファクトリを提供

bootstrap(AppComponent, [ 
    SomeDep, 
    provide(SomeType, {useFactory: (dep) => new SomeType(dep), 
     deps: [SomeDep]}) 
]); 

あなたは(たとえばHTTP_PROVIDERS用など)、この面倒な宣言

export const SOME_TYPE_PROVIDERS: any[] = [ 
    SomeDep, 
    provide(SomeType, {useFactory: (dep) => new SomeType(dep), 
     deps: [SomeDep]}) 
]; 

なく、それらを簡単に再利用可能にするために、このようなプロバイダのための変数を作成し、

のようにそれを使用することができます
bootstrap(AppComponent, [SOME_TYPE_PROVIDERS]);