ajax - 为什么我不能从 Angular 调用 ajax 调用

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。但是我收到了这个错误:

Cannot resolve all parameters for UserServices(?). Make sure they all have valid type or annotations.

我把http参数去掉，导入调用，没有报错，所以我猜是问题出在那里，但是我查不出问题所在

Answer 1

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

有多种方法可以使用 provide 和 @inject 或使用 @Injectable 装饰器进行注入(inject)。例如，在这里，您使用 @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};

在根目录下注入(inject) UserServices 和 HTTP_PROVIDERS，通常您在应用程序根目录下将您需要的服务作为单例注入(inject)到应用程序中。如果没有，您可以将服务单独注入(inject)到 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 的应用取决于用例)并将 this.users 的值设置为可观察对象，而不是显式订阅它们。}

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

_和

this.users = userServices.getUsersList();

注意:在示例中，我刚刚导入了 map 运算符，以便将 map 作为 http 返回的 observable 的一部分(import rxjs/add/operator/map)，因为这没有在全局级别的系统 Js 配置 paths 属性中映射。

这是一个有效的 plunker Demo .