Angular 4/ TypeScript HttpModule在类中的应用

Question

我在Angular 4应用程序中有一个TypeScript类，我想这样做：

Import { Http } from '@angular/http';

export class Request {
  public url: string;
  public services: string;
  public regions: string;
  public start: Date;
  public end: Date;
  public output: string;

  constructor(private http: Http) {
    this.url = "https://someurl.com";
    this.services = "All";
    this.regions = "All";
    this.output = "json";
  }

  public Submit() {
    this.http.get(this.url).subscribe();
    ...
  }
}

这一切都很好，除了在组件中，我的模型的一部分是请求类

@Component({
selector: "app-request",
styleUrls: [
    './request.component.css'
],
templateUrl: './request.component.html'
})
export class RequestComponent implements OnInit {

  request: Request = new Request();

  ...
}

然后，该模板有几个如下所示的输入：

<select name="output" id="output" [(ngModel)]="request.output">
        <option *ngFor="let output of outputs" [ngValue]="output">{{output}}</option>
</select>

request对象有一组属性，这些属性被设置为ngModel的一部分，而且类对象有一个submit方法是很自然的，我可以直接从组件中调用它。但是，new Request()会失败，因为它期望Http模块对象作为参数。这种方法是不是不可行，或者我如何在这里将Http模块作为参数注入？

Answer 1

理想情况下，您不应该将类和服务包装在一起(从维护的角度来看)。

然而，为了回答你的问题。你必须提出你的请求(混合服务？？)一个带有注解@Injectable()的可注入模块，并通过将其提供到模块中来使其可访问。

Import { Http } from '@angular/http';
Import { Injectable } from '@angular/core';

@Injectable()
export class Request {
  public url: string;
  public services: string;
  public regions: string;
  public start: Date;
  public end: Date;
  public output: string;

  constructor(private http: Http) {
    this.url = "https://someurl.com";
    this.services = "All";
    this.regions = "All";
    this.output = "json";
  }

  public Submit() {
    this.http.get(this.url).subscribe();
    ...
  }
}

现在你可以在你的组件构造函数中获取实例了。

@Component({
selector: "app-request",
styleUrls: [
    './request.component.css'
],
templateUrl: './request.component.html'
})
export class RequestComponent implements OnInit {

  request: Request;

  constructor(
    request:Request){}

}

这是一个标准的角度特征。理想情况下，您应该使服务可注入。