サービスでサービスを注入する際に依存関係のパラメータを渡す方法（Ionic 2/Angular 2/Typescript）

Question

私は、typescriptのionic 2でwebsocketサーバーに接続するサンプルアプリケーションを作成しています。 repo

私の要件へのリンクは、アプリケーション中のWebSocket接続は、接続を作成するには、私はangular2-websocketを使用してい

を起動することです。

参考文献：

1. http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

2. http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html

私はエラーを取得しています」のすべてのパラメータを解決できません '$のWebSocket'（？文字列、配列、）すべてのパラメータがInjectで装飾されているか、有効なタイプの注釈を持っていること、および '$ WebSocket'が注入可能で装飾されていることを確認してください。 "

CODE： app.ts

import {App, Platform} from 'ionic-framework/ionic'; 
import {TabsPage} from './pages/tabs/tabs'; 
import {ConnectionService} from './framework/connection/connection-service' 
import {$WebSocket} from 'angular2-websocket/angular2-websocket'; 
import {bootstrap} from 'angular2/platform/browser'; 

// https://angular.io/docs/ts/latest/api/core/Type-interface.html 
import {Type} from 'angular2/core'; 


@App({ 
    template: '<ion-nav [root]="rootPage"></ion-nav>', 
    config: {} 
}) 
export class MyApp { 
    rootPage: Type = TabsPage; 

    constructor(platform: Platform, private conn : ConnectionService) { 
    platform.ready().then(() => { 
     this.conn.connect(); 
    }); 
    } 
} 
bootstrap(MyApp, [$WebSocket, ConnectionService]); 

connection-service.ts

import {Injectable, Component, Inject} from 'angular2/core'; 
import {$WebSocket} from 'angular2-websocket/angular2-websocket'; 
import {bootstrap} from 'angular2/platform/browser'; 

@Injectable() 
export class ConnectionService { 

    private _status: number; 

    //private connection: $WebSocket; 

    constructor(private connection : $WebSocket = new $WebSocket("ws://echo.websocket.org")) { 

    console.log("Starting connection"); 

    //this.connection = new $WebSocket("ws://echo.websocket.org"); 

    this.connection.onClose(this.onCloseHandler); 
    this.connection.onError(this.onErrorHandler); 
    this.connection.onOpen(this.onOpenHandler); 
    this.connection.onMessage(this.onRecieveHandler, {}); 

} 
... 
public connect() { 
    this.connection.connect(true); 
} 
... 
} 
bootstrap(ConnectionService, [$WebSocket]); 

Answer 1

私の問題を解決するには、代わりに、ブートストラップ

bootstrap(ConnectionService, 
    [provide($WebSocket, useValue: new WebSocket("ws://echo.websocket.org")]); 

例えば使用する（イオンに固有）@App（）注釈のプロバイダのフィールドを使用していました。

@App({ 
    template: '<ion-nav [root]="rootPage"></ion-nav>', 
    config: {}, 
    providers : [ provide($WebSocket, { useValue: new $WebSocket("ws://echo.websocket.org") }), ConnectionService] 
}) 

ワーキングサンプルは、固定のための感謝をhere

Answer 2

明らか$WebSocketはstring、arrayと少なくとも直接ではなく、$WebSocketは、注射ではないになり、他のパラメータが必要です。

回避策としては、文字列リテラルを使用すると、工場出荷時のように、望むものではない場合、他のオプションがあります

import {Injectable, Component, Inject, provide} from 'angular2/core'; 

bootstrap(ConnectionService, 
    [provide($WebSocket, { useValue: new $WebSocket("ws://echo.websocket.org") })]); 

使用することができます。

Answer 3

私が見るところでは、あなたのサービスのためにあなた自身でインスタント化するので、$WebSocketを注入するべきです。私はbootstrapからそれを削除して、コンストラクタのパラメータから、それを提供するのコンストラクタで、それを代わりにインスタンス化します：

あなたは角度で依存性の注入を活用したい場合、あなたは Angular2がでインスタンス化させなければならない、一般的に、言っ

@Injectable() 
export class ConnectionService { 
    private _status: number; 
    private connection: $WebSocket; 

    constructor() { 
    this.connection = new $WebSocket("ws://echo.websocket.org"); 
    } 
} 

コンストラクタに注入したいものそのものを返します。

あなたの場合、Angular2は$WebSocketサービスをインスタンス化しようとします。私はそのコンストラクタが3つのパラメータを受け入れ、Angular2がインスタンス化レベルでこれらのパラメータを解決しようとすると思います。最後のものは解決できません。 $WebServiceコンストラクタのパラメータを指定できますか？