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 config

  <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

您需要将HttpModule添加到NgModule

中的导入

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

@Inject()无需Http。

确保您已正确导入（TS导入）所有内容Http，HttpModule，...

Answer 2

完全重写我的答案以更好地定位。

您的模块：

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。 E.g。

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。浏览器并不真正运行，需要编译（转换 - 选择你的选择术语）为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'
    }
}

Answer 3

您应该将RealmChangeListener添加到您的systemjs配置

<强>的index.html

typescriptOptions

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

您的System.config({ transpiler: 'typescript', typescriptOptions: { "emitDecoratorMetadata": true }, map: { ....未在配置中使用。你正在动态地发送文件。您可以查看这个简单的种子项目https://github.com/alexzuza/angular2-typescript-systemjs

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

3 个答案: