码迷,mamicode.com
首页 > 其他好文 > 详细

angular4-注入服务

时间:2017-09-01 21:21:42      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:on()   code   imp   org   .com   provider   exp   nts   inject   

//配置已创建的服务:
import { MemberService } from "./member.service";
@NgModule({ // ... providers: [MemberService] }) export class AppModule { } //导入已创建的服务 import { MemberService } from ../member.service; //使用构造注入方式,注入服务 export class MembersComponent implements OnInit { // ... constructor(private memberService: MemberService) { } }

创建 MemberService 服务

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

@Injectable()
export class MemberService {
    constructor(private http: Http) { }

    getMembers() {
        return this.http
            .get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
            .map(res => res.json())
    }
}

使用 MemberService 服务

import { MemberService } from "./member.service";

@Component({...})
export class MembersComponent implements OnInit {
    members: Member[];

    constructor(private memberService: MemberService) { }

    ngOnInit() {
        this.memberService.getMembers()
            .subscribe(data => {
                if (data) this.members = data;
            });
    }
}

 

angular4-注入服务

标签:on()   code   imp   org   .com   provider   exp   nts   inject   

原文地址:http://www.cnblogs.com/avidya/p/7464928.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!