Как внедрить Angular2 Http-сервис в класс es6/7?

Ответ 1

Поскольку у вас есть @Decorators включено в Babel

... Я отрегулирую этот ответ, чтобы работать с вашей конкретной настройкой.

1. Вам не хватает HTTP_PROVIDERS

Константа HTTP_PROVIDERS включает в себя ряд функций, необходимых для обработки HTTP-запросов/ответов.

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

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

2. Вам нужно отменить синтаксис DI (зависимость)

Как указано в ответе @alexpods.

Удаление статического ввода

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 available to authenticate()
    this.http = http;
  }

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

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

Кроме того: я знаю, что это работает, потому что я использую его для компонента <ng2-markdown> на EvanPlaice.com.

Ответ 2

Как я уже ответил на это здесь. Если вы пишете код в ES7, используйте static getter для свойства parameters, чтобы указать инъекции в 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 нет предложения по поддержке декораторов параметров (например см. эту проблему для Babel).

Ответ 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);
  }
}

Ответ 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');
  }
}

Обратите внимание, что подпись типа используется только для подсказки для инъекции зависимостей и не используется для проверки типов.