Question

如果我使用es6 / 7（babel - stage 1）而不是TypeScript，那么如何注入服务，特别是Http？

这是我的组件JS：

import {Component, Inject, View, CORE_DIRECTIVES, ViewEncapsulation} from 'angular2/angular2';
import {Http} from 'angular2/http';

@Component({
  selector: 'login'
})
@View({
  templateUrl: './components/login/login.html',
  styleUrls: ['components/login/login.css'],
  directives: [CORE_DIRECTIVES],
  encapsulation: ViewEncapsulation.Emulated
})
export class Login {
  constructor(@Inject(Http) http) {
    console.log('http', http);
  }

  authenticate(username, password) {
    // this.http.get('/login');
  }
}

我试过了：

export class Login {
  constructor(@Inject(Http) http) {
    console.log('http', http);
  }
}
/********************/
@Inject(Http)
export class Login {
  constructor(http) {
    console.log('http', http);
  }
}
/********************/
export class Login {
  constructor(Http: http) {
    console.log('http', http);
  }
}
/********************/
export class Login {
  constructor(http = Http) {
    console.log('http', http);
  }
}
/********************/
export class Login {
  constructor(Http) {
    this.http = new Http()
    console.log('http', this.http);
  }
}
/********************/
export class Login {
  constructor(http = new Http()) {
    console.log('http', http);
  }
}

除了第一次编译之外的所有内容。其他人让我可以访问Http类或http实例。但都没有效果。

我试图按照Eric Martinez在评论中提到的讨论。 Login.js现在：

import {Component, Inject, View, CORE_DIRECTIVES, ViewEncapsulation} from 'angular2/angular2';
import {HTTP_BINDINGS, Http, BaseRequestOptions, RequestOptions, RequestMethods} from 'angular2/http';

@Component({
  selector: 'login'
})
@View({
  templateUrl: './components/login/login.html',
  styleUrls: ['components/login/login.css'],
  directives: [CORE_DIRECTIVES],
  encapsulation: ViewEncapsulation.Emulated,
  bindings: [Http]
})
export class Login {

  constructor(http) {
    this.http = http;
    console.log('http', http);
  }

  authenticate(usernameEl, passwordEl) {
    var username = usernameEl.value;
    var password = passwordEl.value;
    console.log('username', username, password);

    // this.http.get('/login');
  }
}

Login.parameters = [Http];

它现在编译但生成以下错误：

未捕获（在承诺中）NoBindingError {message：“没有Http的提供者！   （登录 - ＆gt; Http）“，堆栈：”错误：DI异常↵在   NoBindingError.BaseExce ... or._new   （http://localhost:3000/bundle.js:7319:22）“，键：数组[2]，注射器：   Array [2]} constructResolvingMessage :( keys）参数：（...）调用者：   （...）length：1name：“”prototype：Object__proto __ :(）context：（...）injectors：Array [2] 0：Injector1：Injectorlength：   2__proto__：数组[0]键：数组[2]消息：“没有Http的提供者！   （登录 - ＆gt; Http）“堆栈：”错误：DI例外   NoBindingError.BaseException [作为构造函数]   （http://localhost:3000/bundle.js:8400:24）↵at   NoBindingError.AbstractBindingError [作为构造函数]   （http://localhost:3000/bundle.js:9066:17）↵新的NoBindingError   （http://localhost:3000/bundle.js:9102:17）↵在Injector._throwOrNull   （http://localhost:3000/bundle.js:7469:20）↵at   Injector._getByKeyDefault（http://localhost:3000/bundle.js:7516:22）↵
  在Injector._getByKey（http://localhost:3000/bundle.js:7461:26）↵at   Injector._getByDependency（http://localhost:3000/bundle.js:7447:26）↵
  在Injector._instantiate（http://localhost:3000/bundle.js:7339:37）↵
  在Injector._instantiateBinding   （http://localhost:3000/bundle.js:7330:26）↵在Injector._new   （http://localhost:3000/bundle.js:7319:22）“ proto ：__

Answer 1

您已在Babel中启用@Decorators

...我会根据您的具体设置微调这个答案。

1。您错过了HTTP_PROVIDERS

HTTP_PROVIDERS常量包括处理HTTP请求/响应所需的许多函数。

import {Http, HTTP_PROVIDERS} from 'angular2/http';    

@Component({
  selector: 'login',
  providers: [ HTTP_PROVIDERS ]
})

2。你需要去掉DI（依赖注入）语法

如@alexpods' answer中所述。

删除静态输入

constructor(http) {

@Inject隐式处理DI，但仅在Angular2 + Typescript中受支持。由于您使用的是Angular2 + ES6，因此需要在类中附加静态getter参数，以提供特定于ES6的等效项。

static get parameters() {
    return [[Http]];
}

3。您需要在构造函数

中将Http实例绑定到您的类

通过这样做，您可以使用authenticate()方法访问它。

constructor(http) {
    this.http = http;
    console.log('http', this.http);
}

...以及完整的实施：

import {Component, Inject, View, CORE_DIRECTIVES, ViewEncapsulation} from 'angular2/angular2';
import {Http, HTTP_PROVIDERS} from 'angular2/http';

@Component({
  selector: 'login',
  // required for Http
  providers: [ HTTP_PROVIDERS ]
})
@View({
  templateUrl: './components/login/login.html',
  styleUrls: ['components/login/login.css'],
  directives: [CORE_DIRECTIVES],
  encapsulation: ViewEncapsulation.Emulated
})
export class Login {
  constructor(http) {
    // bind http to your class during construction
    //   so it's available to authenticate()
    this.http = http;
  }

  // Angular2 DI desugar'd
  static get parameters() {
    return [[Http]];
  }

  authenticate(username, password) {
    this.http.get('/login');
  }
}

除此之外：我知道这是有道理的，因为我将其用于EvanPlaice.com.上的<ng2-markdown>组件

Answer 2

我是如何回答的here，如果您在ES7中编写代码，请使用parameters属性的静态getter来指定对组件constructor的注入。例如：

import { Http } from 'angular2/http';
// other imports ...

// component decorators ...
export class Login {

  static get parameters() {
    return [[Http]];
  }

  constructor(http) {
    this.http = http;
    console.log('http', http);
  }

  // other methods
}

我认为此时最简洁的方法。

请记住，目前没有提议在ES7中支持参数装饰器（例如see this issue for Babel）。

Answer 3

来自官方API Review的方法适用于我：

import {Http, HTTP_PROVIDERS} from 'angular2/http';
@Component({
  selector: 'http-app',
  viewProviders: [HTTP_PROVIDERS],
  templateUrl: 'people.html'
})
class PeopleComponent {
  constructor(http: Http) {
    http.get('people.json')
      .map(res => res.json())
      .subscribe(people => this.people = people);
  }
}

Answer 4

使用babel-plugin-angular2-annotations，您可以像使用TypeScript一样使用构造函数参数类型注释注入服务。

安装babel插件：

npm install -D babel-plugin-angular2-annotations babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties babel-plugin-transform-flow-strip-types babel-preset-es2015

.babelrc：

{
  "plugins": [
    "angular2-annotations",
    "transform-decorators-legacy",
    "transform-class-properties",
    "transform-flow-strip-types"
  ],
  "presets": [
    "es2015"
  ]
}

瞧！

import {Component, View, CORE_DIRECTIVES, ViewEncapsulation} from 'angular2/angular2';
import {Http} from 'angular2/http';

@Component({
  selector: 'login'
})
@View({
  templateUrl: './components/login/login.html',
  styleUrls: ['components/login/login.css'],
  directives: [CORE_DIRECTIVES],
  encapsulation: ViewEncapsulation.Emulated
})
export class Login {
  constructor(http: Http) {
    console.log('http', http);
    this.http = http;
  }

  authenticate(username, password) {
    this.http.get('/login');
  }
}

请注意，类型签名仅用于依赖注入的提示，不用于类型检查。

如何将Angular2 Http服务注入es6 / 7类？

4 个答案: