typescript 如何从 angular 2 的服务中获取数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35332498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get data from service in angular 2?
提问by user944513
I am able to get data using http (in a same component ) .But I am not getting data using service.can we call service method and grt data from server and display on component ? I try to make service and try to get data from server .But I am not able to know how to use this service ? http://plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview
我能够使用 http（在同一个组件中）获取数据。但是我没有使用服务获取数据。我们可以从服务器调用服务方法和 grt 数据并在组件上显示吗？我尝试提供服务并尝试从服务器获取数据。但我不知道如何使用此服务？ http://plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview
import {Component, Injectable,Input,Output,EventEmitter} from 'angular2/core'
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
// Name Service
export interface myData {
name:Array;
}
@Injectable()
export class SharedService {
sharingData: myData=[{name:"nyks"}];
constructor(private http:Http) {
}
getData:Array()
{
this.sharingData.name=this.http.get('data.json')
.map(res => res.json());
return this.sharingData.name;
}
}
采纳答案by Thierry Templier
You could try this:
你可以试试这个：
import {SharedService} from './service';
@Component({
(...)
providers: [SharedService]
})
export class MyComponent {
constructor(private service:SharedService) {
this.service.getData();
}
}
That said, I see strange things into your service since the Angular2 HTTP support leverages observables (asynchronous processing). I would refactor it this way:
也就是说，由于 Angular2 HTTP 支持利用了 observables（异步处理），所以我在您的服务中看到了一些奇怪的东西。我会这样重构它：
@Injectable()
export class SharedService {
//sharingData: myData=[{name:"nyks"}];
constructor(private http:Http) {
}
getData:Array() {
return this.http.get('data.json')
.map(res => res.json());
}
}
and in the component:
并在组件中：
import {SharedService} from './service';
@Component({
(...)
template: `
<ul>
<li *ngFor="d of dataToDisplay">{{d.name}}</li>
<ul>
`,
providers: [SharedService]
})
export class MyComponent {
constructor(private service:SharedService) {
this.service.getData().subscribe(data => {
this.dataToDisplay = data;
});
}
}
This answer could give you more details:
这个答案可以为您提供更多详细信息：
回答by Günter Z?chbauer
You need to add SharedServiceto the list of providers in bootstrap
您需要SharedService在 bootstrap 中添加到提供程序列表中
bootstrap(MainComponent,[
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy}),
HTTP_PROVIDERS,
SharedService
]);
then you can inject it into your component
然后你可以将它注入到你的组件中
export class MainComponent {
constructor(private sharedService:SharedService) {}
clickHandler() {
this.data = sharedService.getData()
}
}
the getData method needs to be fixed
getData 方法需要修复
{
this.sharingData.name=this.http.get('data.json')
.map(res => res.json());
// the following line is executed before the result arrives
// because above code is async
// therefore this always returns null
return this.sharingData.name;
}
