使用DI将窗口对象注入到Angular的组件中

时间:2016-10-03 14:33:19

标签: angular ionic-framework ionic2

我在我的应用程序中加载socket.io就像这样:

index.html
<script src="http://myapp.com/socket.io/socket.io.js"></script>
...
// Angular stuff

我有一个名为Socket的组件,需要window.io才能工作。

import { Injectable } from '@angular/core';
import { Events } from 'ionic-angular';

@Injectable()
export class Socket {

  public isConnected: boolean = false;

  constructor(public events: Events) {
    if (typeof window.io === "undefined") {
        throw new Error("Socket.io is undefined.");
    }

    this.io = window.io;
  }

  connect() {
    this.io.connect("...");
  }

  listen() {

  }

}

从理论上讲,它可能有用(没有测试),但将窗口范围内的东西注入类中并不是一个好习惯。

有没有办法像这样做:

import { SocketIODriver } from 'socket.io';
import { Socket } from 'App/Socket/Socket';

@Component({
   templateUrl: 'layout.html'
})
export class ConferenceApp {
   constructor(
     public io: io,
     public Socket: Socket
   ) {
      this.socket = new Socket(new SocketIODriver());
   }
}

谢谢。

聚苯乙烯。 IIRC,socket.io必须从服务器加载,这就是我从服务器加载它的原因。如果它可以放入我的JS文件夹,那就更好了。

1 个答案:

答案 0 :(得分:2)

Angular 2适用于注射器。每个进样器都可以这样使用,您可以轻松使用它们。

例如,查看角度2注入器API,您可以使用名为{useValue:'theValueToInject'}的对象。

这样,当您想要注入已经实例化的东西,或者只是一个值(例如,也就是窗口对象)时,您可以通过useValue将其传递给模块的注入器:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    { provide: 'Window', useValue: window }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

所以,您可以像以下一样使用它:

constructor( @Inject('Window') private window: any) {} // or window type, I don't know what it's exaclty