如何在 angular2 GA 中使用 Http 提供程序？

Question

我正在尝试使用 Angular 2 Http 服务，但我得到了

无法解析 AppComponent 的所有参数：(?)

哪个有这个签名

 constructor(public http:Http){ }

我将问题追踪到声明 Http 的提供程序。

In the angular 2 quickstart他们说

在这个演示中，我们通过将其他 NgModule 导入到我们的根 NgModule 来注册提供程序。

但我已经有了

@NgModule({
    imports: [ BrowserModule, HttpModule, FormsModule ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

所以，我知道提供商应该没问题。

在文件 http.d.ts 的代码文档中，我发现：

 * import {Http, HTTP_PROVIDERS} from '@angular/http';

但是当我尝试写这篇文章时，我发现HTTP_PROVIDERS 不存在（我猜是在 GA 之前）

解决此错误的唯一方法是在签名中添加@Inject(Http)。

如果不在签名中添加@Inject(Http)，如何使其工作？

这是我的 systemjs 配置

  <script>
        System.config({
            transpiler: 'typescript',
            map: {
                '@angular/core': './node_modules/@angular/core/bundles/core.umd.js',
                '@angular/platform-browser-dynamic': './node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/platform-browser': './node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/compiler': './node_modules/@angular/compiler/bundles/compiler.umd.js',
                '@angular/common': './node_modules/@angular/common/bundles/common.umd.js',
                '@angular/http': './node_modules/@angular/http/bundles/http.umd.js',
                '@angular/forms': './node_modules/@angular/forms/bundles/forms.umd.js',
                'rxjs': './node_modules/rxjs'
            },
            packages: {
                './app': {
                    defaultExtension: 'ts'
                },
                '@angular/http':{
                    defaultExtension:'ts'
                },
                'rxjs': {
                    defaultExtension: 'js'
                }
            }
        })

        System.import('./app/main.ts').catch(function (err) {
            console.error(err);
        });

    </script>

这是我的 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

你可以在https://github.com/GuyMograbi/angular2-simple-setup看到我所有的代码

Answer 1

您应该将 typescriptOptions 添加到您的 systemjs 配置中

index.html

 System.config({
    transpiler: 'typescript',
    typescriptOptions: {
     "emitDecoratorMetadata": true
    },
    map: {
    ....

另见angularjs 2.0: Can't inject anything through component constructor()

您的tsconfig.json 未在您的配置中使用。您正在即时转换文件。你可以看看这个简单的种子项目https://github.com/alexzuza/angular2-typescript-systemjs

Answer 2

您需要在NgModule 中的导入中添加HttpModule

@NgModule({
  imports: [BrowserModule, HttpModule]
  ...
})

Http 不需要 @Inject()。

确保您已正确导入（TS 导入）所有 Http、HttpModule、...

Answer 3

完全重写我的答案，以便更有针对性。

你的模块：

import {...} from '@angular/...';

import {HttpModule} from '@angular/http';

@NgModule({
    imports: [..., HttpModule],
    declarations: [...],
    exports: [...],
    providers: [...]
})
export class AppModule {}

你的组件：

import {Component} from '@angular/core';
import {Http} from '@angular/http';

@Component({
    selector: 'my-app',
    template: `...`
})
export class AppComponent{

    constructor(private http: Http){
    }

    private getMyData(){
        return this.http.get(...)
            .map(...)
            .subscribe(...);
    }
}

这应该就是你所需要的。 AppComponent 上没有 @Injectable 装饰器，因为它是 @Component，不是可注入服务。

Angular 会为您进行注入，因此您无需在任何地方执行任何类型的 @Inject(Http)。

只有您自己创建的希望组件（或其他服务）使用的服务才应创建为@Injectable。例如

import {Injectable} from '@angular/core';

@Injectable()
export class SomeService{
    doSomething(){
        //...
    }
}

您可以将 SomeService 添加到您的 Module 级别提供程序数组（对于应用程序级别的单例），甚至是您自己的 Component 提供程序数组（对于新实例以及组件）。

import {SomeService} from './some.service';

@Component({
    selector: '...',
    template: '...',
    providers: [SomeService]
})
export class SomeComponent{ 
    constructor(private someService: SomeService){
        // someService is a new instance of SomeService (not a singleton)
    }
}

但请注意，没有额外的 @Inject 代码 - 提供程序（模块级别或组件级别，取决于您的需要）处理为您创建实例并将其传递给构造函数。

编辑以回复更新后的问题：

我认为您的systemjs.config 可能是错误的。我看到您的应用程序指向 ts 文件而不是 js。浏览器并不真正运行 ts，ts 需要编译（转译 - 选择你的选择）成 js。 js 是 systemjs.config 应该加载的，而不是 ts。

packages: {
    app: {
        main: './main.js',
        defaultExtension: 'js'
    },
    rxjs: {
        defaultExtension: 'js'
    },
    'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
    }
}