【问题标题】:HTTP PROVIDERS in @Injectable Service@Injectable 服务中的 HTTP 提供程序
【发布时间】:2016-04-04 07:05:10
【问题描述】:

Angular2,现在处于测试阶段,我的公司决定对其进行一些研究。 我试图从我的服务中设置一个请求。我浏览了所有互联网,但没有任何效果。 (也许帖子是在 Beta 版发布之前写的)。

所以,我的 boot.ts 是这样的:

import {bootstrap} from 'angular2/platform/browser';
import {Component, provide} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';

import {BrandsComponent} from './brands/brands.component';
import {BrandsService} from './brands/brands.service';

@Component({
	selector: 'my-app',
	template: `
		<brands></brands>
	`,
	directives: [BrandsComponent]
})

export class AppComponent {
}


bootstrap(AppComponent, [HTTP_PROVIDERS, BrandsService]);

我的 BrandsComponent 注入了我的 BrandsService。 这是我的服务代码:

import {Http} from 'angular2/http';
import {Injectable, Inject} from 'angular2/core';

@Injectable()
export class BrandsService{
	constructor(public http: Http) {
		console.log('Task Service created.', http);
		http.get('http://google.fr');
	}

	getBrands(){
		//return this.http.get('./brands.json');
		return [];
	}
}

在我的控制台中,我有“已创建任务服务”日志,但任何 ajax 请求都在进行中。

我无法告诉你我尝试了什么,因为我更改了我的代码大约十亿次。

感谢您的帮助!

@编辑:

这是我的 BrandsComponent 代码:

import {Component} from 'angular2/core';

import {Brand} from './brand.interface';
import {BrandsService} from './brands.service';

import {ModelsComponent} from './../models/models.component';

@Component({
	selector: 'brands',
	templateUrl: 'templates/brands/list.html',
	providers: [BrandsService],
	directives: [ModelsComponent]
})

export class BrandsComponent implements OnInit{
	public brands;
	public selectedBrand : Brand;

	constructor(private _brandsService: BrandsService) { }

	/*
	* Get all brands from brands service
	*/
	getBrands(){
		this.brands = this._brandsService.getBrands();
	}

	/*
	* On component init, get all brands from service
	*/
	ngOnInit(){
		this.getBrands();
	}

	/*
	* Called when li of brand list was clicked
	*/
	onSelect(brand : Brand){
		this.selectedBrand = brand;
	}
}

【问题讨论】:

  • 您能发布 BrandsComponent 代码吗?
  • 错误是什么。因为如果您收到“已创建任务服务”日志,那么首先您必须将 http.get 的值保存在某个地方以供使用,如果我没记错的话。
  • Romain:我有我的 BrandsComponent,谢谢。 @binariedMe:当然可以,但是任何请求都可以在开发者控制台中看到。我将结果分配给 var,并在控制台记录它,但我有 Observer 对象响应。我搜索原因和解释。

标签: javascript http service angular provider


【解决方案1】:

事实上 observables 是惰性的。这意味着在使用 subscribe 方法附加一些响应侦听器之前不会发送相应的 HTTP 请求。

BrandsService 的构造函数中添加订阅方法应该会触发您的 HTTP 请求:

import {Http} from 'angular2/http';
import {Injectable, Inject} from 'angular2/core';

@Injectable()
export class BrandsService{
  constructor(public http: Http) {
    console.log('Task Service created.', http);
    http.get('http://google.fr').subscribe();
  }
  (...)
}

希望对你有帮助, 蒂埃里

【讨论】:

  • 谢谢蒂埃里。事实上,通过 subscribe 方法,请求已经正确启动。经过对订阅方法的研究,我们可以在参数中,从响应中设置数据,例如:.subscribe(data =&gt; this.brands = data.json());。如果我 console.log(data.json()),那很好,我有一个对象。但是如果我返回 this.brands,它会返回 undefined。也许返回是在 ajax 响应之前设置的?
  • 是的,事实上,您不能返回this.brands,因为您在箭头函数(即回调)中。您应该返回 observable:return http.get('http://google.fr'); 并在调用服务的组件中对其调用 subscribe 方法。这个答案应该可以帮助你:stackoverflow.com/questions/34450131/… ;-)
  • 很棒的家伙。谢谢你的提议!我从我的服务返回http方法,我在调用服务的ma组件中,我在这里设置订阅并且一切正常。我希望这篇文章可以帮助很多人;)
猜你喜欢
  • 2017-08-30
  • 2017-12-20
  • 1970-01-01
  • 1970-01-01
  • 2011-08-07
  • 2016-12-23
相关资源
最近更新 更多