在angular2指令中注入angular1服务

Question

我阅读大量的文章对此事喜欢这样 ， 这和同时此这些文章，但每一个从其中NG1服务是一种情况开始class并且可以导出。

我处在非常不同的情况下，我经常在同一文件中拥有多个服务，并且它们以非常古老的方式定义，例如

angular.module('App.services').factory('SessionService',
    function() {
        var defer = $q.defer();
        [...]
    }
);

没有class ，就没有export 。

这些东西在页面中直接与老式的<script src="...">

同时，我试图在Angular2中创建新的指令，这些指令需要那些老式的服务。

我知道我应该能够写这样的东西

import {Injector,Component, Directive, ElementRef, Input, View} from 'angular2/core';

var injector = Injector.resolveAndCreate([
    SessionService
]);

var SessionService = injector.get(SessionService);


@Component({
    selector: 'nav-bar'
})

@View({
    templateUrl: '/app/components/navbar/navBar.html'
})

export class navBar {
    constructor() {

    }
}

但是当然找不到SessionService对象。

我如何摆脱这个混乱局面？

[附加信息]

使用babel作为编译器

添加了angular2-annotations插件

一篇很棒的文章，以了解angular2中注释和装饰器之间的区别： http ://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html

Answer 1

您只需要利用@Inject ：

@Component({
  selector: 'nav-bar'
  templateUrl: '/app/components/navbar/navBar.html'
})
export class navBar {
  constructor(private @Inject('SessionService') sessionService) {

  }
}

有关更多详细信息，请参见此plunkr： http ://plnkr.co/edit/U6ygjUUQ04mTGAAaC1pZ?p=preview

您会注意到，使用factory不能使用类。 只有服务才有可能...

如果仅使用ES6，则可以尝试以下操作：

@Component({
  selector: 'nav-bar'
  templateUrl: '/app/components/navbar/navBar.html'
})
export class navBar {
  constructor(sessionService) {

  }

  static get parameters() {
    return [[ new Inject('...'), new Inject('...') ]];
  }
}