如何传递参数的依赖，而在2角注射服务服务（2离子/角2 /打字稿） [英] How to pass parameters for dependency while Injecting services in services in Angular 2 ( Ionic 2 / Angular 2 / Typescript )

问题描述

我在做一个示例应用程序，以使打字稿离子2连接到WebSocket伺服器。链接回购

我的要求是使应用程序在WebSocket连接启动

我使用 angular2-的WebSocket 来创建连接。

参考文献：

1. <一个href=\"http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html\">http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html




2. <一个href=\"http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html\">http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html

我得到一个错误无法解析$ WebSocket的'（字符串，数组？）。确保所有的参数都与注入的装饰或具有有效的类型注解和'$的WebSocket的所有参数都装饰与注射。

code：
<一href=\"https://github.com/mehdhi/ionic2websocketconnectionsample/blob/master/app/app.ts\">app.ts

 进口{应用程序，平台}从'离子的框架/离子';
进口{} TabsPage从'./pages/tabs/tabs';
进口{} ConnectionService从'./framework/connection/connection-service
从进口{$} WebSocket的angular2-的WebSocket / angular2-的WebSocket';
从angular2 /平台/浏览器的进口{}引导;// https://angular.io/docs/ts/latest/api/core/Type-in​​terface.html
从angular2 /核心进口{类型};
@App（{
  模板：'＆LT;离子导航[根] =rootPage＆GT;＆LT; /离子导航＆GT;，
  配置：{}
}）
出口类的MyApp {
  rootPage：类型= TabsPage;  构造器（平台：平台，私人康恩：ConnectionService）{
    platform.ready（）然后（（）=方式＆gt; {
      this.conn.connect（）;
    }）;
  }
}
引导（MyApp的，[$的WebSocket，ConnectionService]）;
 

<一个href=\"https://github.com/mehdhi/ionic2websocketconnectionsample/blob/master/app/framework/connection/connection-service.ts\">connection-service.ts

 进口{注射，组件，注入}从'angular2 /核心;
从进口{$} WebSocket的angular2-的WebSocket / angular2-的WebSocket';
从angular2 /平台/浏览器的进口{}引导;@Injectable（）
出口类ConnectionService {    私人_status：数;    //专用连接：$的WebSocket;    构造函数（专用连接：$ = WebSocket的新的WebSocket $（WS：//echo.websocket.org））{    的console.log（启动连接）;   //this.connection =新的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，{}）;}
...
公共连接（）{
    this.connection.connect（真）;
}
...
}
引导（ConnectionService，[$的WebSocket]）;
 

解决方案

在解决我的问题是使用@App（）标注的（具体以离子的）供应商领域，而不是使用引导程序

 引导（ConnectionService，
    [提供（$的WebSocket，useValue：新的WebSocket（WS：//echo.websocket.org）]）;
 

例如。

  @App（{
  模板：'＆LT;离子导航[根] =rootPage＆GT;＆LT; /离子导航＆GT;，
  配置：{}，
  供应商：提供（$的WebSocket，{useValue：新的WebSocket $（WS：//echo.websocket.org）}），ConnectionService]
}）
 

样的工作可以发现这里

I'm making a sample application to make connection to a websocket server in ionic 2 in typescript. link to repo

My requirement is to make the websocket connection during application start up

I'm using angular2-websocket to creating the connection.

References :

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

I'm getting a error " Cannot resolve all parameters for '$WebSocket'(String, Array, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that '$WebSocket' is decorated with Injectable. "

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]);

解决方案

The Solution to my problem was using @App() Annotation's (Specific to ionic) provider field instead of using bootstrap

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

Eg.

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

Working sample can be found here

这篇关于如何传递参数的依赖，而在2角注射服务服务（2离子/角2 /打字稿）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！