在Angular 2中手动注入Http [英] Inject Http manually in Angular 2

问题描述

我创建了一个基本模型，其中具有所有常用功能来提取数据以及发布或放置数据.实际上，服务在Angular中是做什么的，但是我不想要服务.

I have created a Base Model in which I have all the common functions to fetch data and post or put the data. Actually what a service does in Angular but I don't want a service.

现在我打算做的是，基本模型将由系统中的所有模块扩展，每个模块都有其基本端点以从API获取数据.现在的问题是，如果我在基本模型中注入Http服务，而用户模型扩展了基本模型，那么现在要创建基本模型的对象，我需要传递我无法传递的Http对象.

Now what I am planning to do is The base model will extended by all the modules in my system each module having its base endpoint to get data from the API. Now here's the problem If I inject the Http service in base model and the user model extends the Base model, Now to create a object of base model I need to pass the object of Http which I am unable.

export class BaseModel {
constructor (http: Http) {}

fetch() {
let params = {
            "includes": this.includes,
            "page": page,
            "filters" : this.filters,
            "order" : this.orderDirection + this.orderColumn
        };

        return this.api.get("/"+this.endpoint, params)
            .map(
                (response: any) => {
                    let total = response.meta.total;
                    let current = response.meta.current;

                    let min = current - 5;
                    let max = current + 5;

                    if (min < 1) {
                        min = 1;
                    }

                    if (max > total) {
                        max = total;
                    }
                    else if (max < 10) {
                        if(total < 10) {
                            max = total;
                        }else {
                            max = 10;
                        }
                    }

                    let pages : number[] = [];

                    for (let i = min; i <= max; i++) {
                        pages.push(i);
                    }

                    this.pages = pages;

                    return response
                }
            );
}
}

现在我的用户模型

export class User extends BaseModel {

public id : number;
    public username : string;
    public email : string;
    public password : string;
    public passwordConfirmation : string;
    public details : UserDetail = new UserDetail();
    public type : string;
    public status : string;
    public profileImage : string;
    public profileImageUrl : string;
    public crop : Object = {};
    public lastLogin : string;
    public numberOfLogin : string;
    public joinDate : string;
    public registerType : string = "web";

    public static create(response : any) {

        if (response === undefined || response === null) {
            return response;
        }

        let details = new UserDetail();

        if (response.details) {
            details = UserDetail.create(response.details);
        }

        let user = new User(); //error parameter required
        user.id = response.id;
        user.username = response.username;
        user.email = response.email;
        user.status = response.status;
        user.type = response.type;
        user.details.id = response.details.id;
        user.details = details;
        user.profileImageUrl = response.profile_image_url;
        user.joinDate = response.created_at;
        user.registerType = response.register_type;

        return user;
    }

}

推荐答案

更新(最终)

constructor() {
  let injector = ReflectiveInjector.resolveAndCreate([
    Http,
    BrowserXhr,
    {provide: RequestOptions, useClass: BaseRequestOptions},
    {provide: ResponseOptions, useClass: BaseResponseOptions},
    {provide: ConnectionBackend, useClass: XHRBackend},
    {provide: XSRFStrategy, useFactory: () => new CookieXSRFStrategy()},
  ]);
  this.http = injector.get(Http);
}

原始(RC.x)

constructor() {
  let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
  this.http = injector.get(Http);
}

这将创建一个新的注入器(独立于Angular2应用程序其余部分使用的注入器.这不一定是问题，您应该意识到这一点.

This creates a new injector (independent of the one used by the rest of your Angular2 app. This isn't necessarily a problem, you just should be aware of it.

另请参见 angular2 resolveAndCreate HTTP-缺少HTTP_PROVIDERS RC7

这篇关于在Angular 2中手动注入Http的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！