3

我是 Angluar 的新手，并且正在按照视频教程进行 HTTP 请求并获取响应数据。由于某种原因，我使用的代码不会触发 http.get。

import { Component, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

@Injectable()
export class AppComponent {

  constructor( private http: Http ){
    console.log('Until here works');
    this.http.get('https://jsonplaceholder.typicode.com/posts').map(data => {
      console.log('Finished');
      console.log( data );
    });
  }

}
4

3 回答 3

2

这是来自文档：

http.get 还没有发送请求。这个 Observable 是冷的，这意味着在订阅 Observable 之前，请求不会发出。

有关更多信息和详细示例，请参阅此链接：https ://angular.io/docs/ts/latest/guide/server-communication.html

这是一个具体的例子：

getProducts(): Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

然后像这样订阅它：

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}
于 2017-04-01T03:02:40.590 回答
1

我们使用服务来最大限度地减少代码行数和开发时间。

使用 angular-cli 命令创建一个单独的服务，ng g s Get 这将为您创建一个新服务。但是您需要像这样在 app.module.ts 中将其添加为提供程序。

或者如果您不使用 anular-cli 创建文件 get.service.ts 文件并按照以下步骤操作

检查我制作的这个示例应用程序。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { GetService } from './get.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [GetService],
  bootstrap: [AppComponent]
})
export class AppModule { }

将这些代码添加到 get.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map';
@Injectable()
export class GetService {

  constructor(private http: Http) { }
  getData() {
    this.http.get('https://jsonplaceholder.typicode.com/posts').map(m => m.json()
    ).subscribe(k => { console.log(k) }); // we have to subscribe for get data out
  }
}

app.component.ts 应该是这样的。

import { Component,Injectable } from '@angular/core';
import { Http } from '@angular/http';

import { GetService } from './get.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  constructor(private _service : GetService ){
    this._service.getData();
  }
}

在此处阅读有关服务的更多信息

于 2017-04-01T04:01:31.797 回答
1

您必须使用服务而不是直接在组件中使用它，因为服务意味着可以使用 Angular 依赖注入来重用。如果您是新手，我建议您使用一次服务，因为这些是 Angular 应用程序的组成部分。

我有一个处理一些基本 Angular 概念的仓库，服务就是其中之一

https://github.com/rahulrsingh09/AngularConcepts

https://rahulrsingh09.github.io/AngularConcepts

于 2017-04-01T06:51:13.530 回答