Question

我有这个组件：

import {Component} from 'angular2/core';
import {UserServices} from '../services/UserServices';

@Component({
    selector: 'users',
    template: '<h1>HOLA</h1>'
})

export class UsersComponent {
    users: Object;

    constructor(userServices: UserServices) {
        userServices.getUsersList();
    }
}

在UserServices中我有这段代码：

import {Http} from 'angular2/http'

export class UserServices {
    users: Array<any>;
    http: any;

    constructor(http: Http) {
        this.http = http;
    }

    getUsersList() {
        this.http.get('./users.json').map((res: Response) => res.json()).subscribe(res => console.log(res));
    }

}

我想调用users自定义标记的ajax调用。但是我收到了这个错误：

无法解析UserServices（？）的所有参数。确保一切有效的类型或注释。

当我删除http参数，导入和调用时，它没有错误，所以我猜问题就在那里，但我找不到问题

Answer 1

您在DI中缺少几个相关部分。

使用provide和@inject或使用@Injectable修饰符进行注入的方法有多种。例如，您可以使用@Injectable装饰您的服务，即

import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

// You do not need to do this, but creating an interface for more strong typing. You could as well create a User class here and use that as view model.
interface IUser{
  name:string;
}

@Injectable()
class UserServices {
    users: Array<IUser>;

    constructor(private http:Http) {}

    getUsersList():Observable<Array<IUser>> {
       return this.http.get('./users.json')
            .map((res: Response) => res.json());
    }

}

export {IUser, UserServices};

在根目录下注入UserServices和HTTP_PROVIDERS通常，您会在应用根级别的应用中注入所需的服务作为单例。如果没有，您可以在UserComponent装饰器的providers数组中单独注入服务。

即

bootstrap(UsersComponent, [HTTP_PROVIDERS, UserServices])

或在组件的装饰者中：

@Component({
    selector: 'users',
    template: `<h1>Users</h1>
    <div *ngFor="#user of users">
    {{user.name}}
    </div>

    `,
    providers:[UserServices] 
})

在你的组件中使用它并将¹订阅到返回的observable。

export class UsersComponent {
    users: Array<IUser>;

    constructor(userServices: UserServices) {
        userServices.getUsersList().subscribe(users => this.users = users);
    }
}

_{¹您也可以使用async pipe（此应用取决于用例）并设置this.users的值作为observable，而不是明确地订阅它们。}

<div *ngFor="#user of users | async">
  {{user.name}}
</div>

<子>和

this.users = userServices.getUsersList();

注意：在我刚刚导入map operator的示例中，为了将地图作为http（import rxjs/add/operator/map）返回的observable的一部分，因为它没有映射到系统Js config中全球范围内的paths财产。

这是一个有效的 plunker Demo 。

Answer 2

该服务需要Injectable()注释

import {Injectable} from 'angular2/core';

@Injectable()
export class UsersComponent {

让DI能够将Http或其他依赖项注入其构造函数。

为什么我不能从Angular2调用ajax调用

2 个答案: