如何在 Angular 2 ( Ionic 2 / Angular 2 / Typescript ) 中的服务中注入服务时传递依赖参数

Question

我正在制作一个示例应用程序以在 ionic 2 in typescript 中连接到 websocket 服务器。 link 至 repo

我的要求是在应用程序启动期间建立 websocket 连接

我正在使用 angular2-websocket 创建连接。

参考资料：

我收到错误消息“无法解析‘$WebSocket’（字符串、数组、？）的所有参数。确保所有参数都使用 Inject 修饰或具有有效的类型注释，并且‘$WebSocket’装饰有Injectable。“

代码： 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

显然 $WebSocket 需要 string、array 和另一个使 $WebSocket 不可注入的参数，至少不能直接注入。

作为解决方法，您可以使用

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

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

如果字符串文字不是你想要的，还有其他选项，比如工厂。

Answer 2

据我所知，您应该通过注入提供 $WebSocket，因为您自己为您的服务实例化了它。我将从 bootstrap 中删除它并在构造函数中实例化它，而不是从构造函数参数中提供它：

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

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

也就是说，一般来说，如果你想在 Angular 中利用依赖注入，你必须 让 Angular2 自己实例化 你想要的东西注入构造函数。

在您的情况下，Angular2 尝试实例化您的 $WebSocket 服务。我认为它的构造函数接受三个参数，当 Angular2 尝试在实例化级别解析这些参数时。它无法解决最后一个问题。您能否提供 $WebService 构造函数的参数？

Answer 3

我的问题的解决方案是使用@App() 注释的（特定于离子）提供程序字段而不是使用 bootstrap

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

例如。

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

可以找到工作样本here

如何在 Angular 2 ( Ionic 2 / Angular 2 / Typescript ) 中的服务中注入服务时传递依赖参数

How to pass parameters for dependency while Injecting services in services in Angular 2 ( Ionic 2 / Angular 2 / Typescript )

typescript

ionic-framework

ionic2

angular2-services

angular