Question

我是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 );
    });
  }

}

Answer 1

这来自文档：

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);
}

Answer 2

我们使用服务来最小化代码行数和开发时间。

使用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();
  }
}

详细了解服务here

Answer 3

您必须使用服务而不是直接在组件中使用它，因为服务是使用Angular Dependency Injection可重用的。如果你是新手，我会建议你去做一次服务，因为这些是角度应用的组成部分。

我有一个Repo处理一些基本的角度概念和服务是其中之一请检查出来希望它有所帮助，我也有一个生活的例子同样的gh页面。

https://github.com/rahulrsingh09/AngularConcepts

https://rahulrsingh09.github.io/AngularConcepts

HTTP请求无法启动

3 个答案: