https://segmentfault.com/a/1190000006672079

大家关于上面的代码部分会有一些疑问,我们来给大家解释一下:首先我们使用了刚才我们创造的模拟数据Users;然后我们从@angular/core中导出了Injectable,就像我们从中导出Component一样;@Injectable()标志着一个类可以被一个注入器实例化;通常来讲,在试图实例化一个没有被标识为@Injectable()的类时候,注入器将会报告错误.上面的解释现在不明白不要紧,我们先学会如何使用;就像你不懂计算机原理一样可以把计算机玩得很溜一样.

我们接下来要在AppComponent组件中使用UserService了,需要注意的地方是:我们要在@Component的元数据中使用providers声明我们所需要的依赖,还要引入User类来帮助我们声明数据的类型.

import {UserService} from "./services/user.service";
import {User} from "./classes/User";
//...
@Component({
    selector: 'my-app',
    //template: '
My First Angular2 Travel
',
    templateUrl: 'app/templates/app.html',
    providers: [
        UserService
    ]
})
export class AppComponent {
    users: User[];

    constructor(private userService: UserService) {
        this.users = userService.getUsers();
    }
}

对上面代码的一些解释:我们使用providers: [UserService]来声明我们这个组件的依赖,如果没有这个选项,我们的程序会报错;然后我们给这个类添加一个属性users,同时声明这个属性的类型是一个含有User类实例的数组;最后我们在构造函数中又声明了一个私有的属性userService,它是UserService服务类的一个实例,我们可以用这个实例来获取users数据.



如果这个时候你试图把user.service.ts的@Injectable注释掉的话,整个程序是没有报错的,但是我们建议为每个服务类都添加@Injectable(),包括那些没有依赖所以技术上不需要它的.因为:(1)面向未来,没有必要记得在后来添加了一个依赖的时候添加@Injectable().(2)一致性,所有的服务都遵循同样的规则,并且我们不需要考虑为什么少一个装饰器.


这是因为,我们的UserService服务现在还没有什么依赖,如果我们给UserService添加一个依赖的话,如果这时候把@Injectable()注释掉的话,程序就会报错;我们来试试看吧.



使用构造注入的方式，注入与 Token 关联的依赖对象
/**
* 封装Http服务，如在每个Http的请求头中添加token，类似于Ng1.x中的拦截器
*/
@Injectable() 
export class ApiService {
   constructor(
   // 注入Angular 2 中的Http服务，与Ng1.x的区别：
   // 在Ng1.x中调用Http服务后，返回Promise对象
   // 在Ng2.x中调用Http服务后，返回Observable对象
      public http: Http) { 
   }
   ...
}

/**
* AppModule
*/
@NgModule({
  ...
  providers: [
       { provide: ApiService, useClass: ApiService } // 可使用简洁的语法，即直接使用ApiService
  ]
})
export class AppModule { }

/**
* 系统首页
*/
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(
    public apiService: ApiService // 使用构造注入的方式，注入ApiService的实例对象
  ) { }
  
  ngOnInit(): void {
    this.apiService.get(HOME_URL) // 获取首页相关的数据
    .map(res => res.json()) // 返回的res对象是Response类型的实例
    .subscribe(result => {
      ...
    })
  }
}