Jak przekazywać parametry zależność podczas Injecting usług w usługach w Angular 2 (Ionic 2/Angular 2/Typescript)

Question

Robię przykładową aplikację, aby połączyć się z serwerem websocket w jonowym 2 w maszynopisie. Link do repo

Moje wymogiem jest, aby połączenie websocket podczas aplikacji uruchomić

używam angular2-websocket do tworzenia połączenia.

Referencje:

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

Dostaję błąd "nie można rozwiązać wszystkie parametry dla '$ websocket' (? String Array) Upewnij się, że wszystkie parametry są ozdobione Inject lub mają adnotacje typu, a "$ WebSocket" jest ozdobione Injectable. "

KOD: 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

Rozwiązanie mojego problemu @App() (specyficzne dla jonowy) pole dostawcy Adnotacja została używając zamiast korzystania z bootstrap

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

Np.

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

próbka robocza można znaleźć here

Answer 2

Oczywiście $WebSocket wymaga string, array i innego parametru, który nie sprawia $WebSocket wstrzykiwania przynajmniej nie bezpośrednio.

Jako obejście można użyć

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

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

Są jeszcze inne opcje, jeśli ciąg nie jest dosłowny, co chcesz, jak w fabryce.

Answer 3

Z tego co widzę, powinieneś podać $WebSocket przez wstrzyknięcie od momentu utworzenia go przez siebie dla swojej usługi. Chciałbym usunąć go z bootstrap i oznacz ją w konstruktorze zamiast dostarczać je z parametrami Konstruktor:

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

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

To powiedziawszy, w ogóle, jeśli chcesz wykorzystać iniekcji zależność kątowej należy niech Angular2 instancji przez samo siebie rzeczy, które chcesz wstrzyknąć w konstruktorze.

W twoim przypadku Angular2 próbuje utworzyć instancję usługi $WebSocket. Myślę, że jego konstruktor akceptuje trzy parametry i kiedy Angular2 próbuje rozwiązać te parametry na poziomie instancji. Nie może rozwiązać ostatniego. Czy możesz podać parametry konstruktora $WebService?