angular4 服务依赖注入的三种方法

假设有服务authservice，现在要把它注入到我们的组件中。有下列三种方法。

方法一：最简单直接，直接生产一个该服务的实例对象。

import { Component, OnInit }from'@angular/core';

//引入AuthService

import { AuthService }from'../core/auth.service';

 

@Component({

  selector:'app-login',

  template:`

    <div>

      <input #usernameReftype="text">

      <input #passwordReftype="password">

      <button(click)="onClick(usernameRef.value,passwordRef.value)">Login</button>

    </div>

  `,

  styles: []

})

exportclassLoginComponentimplements OnInit {

 

 //声明成员变量，其类型为AuthService

  service: AuthService;

 

 constructor() {

   this.service=newAuthService();

  }

 

 ngOnInit() {

  }

 

 onClick(username,password) {

   //调用service的方法

   console.log('auth result is:'+this.service.loginWithCredentials(username, password));

  }

 

}

 

方法二：

import { Component, OnInit }from'@angular/core';

import { AuthService }from'../core/auth.service';

 

@Component({

  selector:'app-login',

  template:`

    <div>

      <input #usernameReftype="text">

      <input #passwordReftype="password">

      <button(click)="onClick(usernameRef.value,passwordRef.value)">Login</button>

    </div>

  `,

  styles: [],

 //在providers中配置AuthService

  providers:[AuthService]

})

exportclassLoginComponentimplements OnInit {

 //在构造函数中将AuthService示例注入到成员变量service中

 //而且我们不需要显式声明成员变量service了

 constructor(private service: AuthService) {

  }

 

 ngOnInit() {

  }

 

 onClick(username,password) {

   console.log('auth result is:'+this.service.loginWithCredentials(username, password));

  }

 

}

import是要将类型引入进来，而provider里面会配置这个类型的实例。

 

方法三：服务在主模块中声明，组件只是把主模块中的实例对象引用过来。推荐这种方式！

import { Component, OnInit, Inject }from'@angular/core';

 

@Component({

  selector:'app-login',

  template:`

    <div>

      <input #usernameReftype="text">

      <input #passwordReftype="password">

      <button(click)="onClick(usernameRef.value,passwordRef.value)">Login</button>

    </div>

  `,

  styles: []

})

exportclassLoginComponentimplements OnInit {

 

 constructor(@Inject('auth')private service) {

  }

 

 ngOnInit() {

  }

 

 onClick(username,password) {

   console.log('auth result is:'+this.service.loginWithCredentials(username, password));

  }

 

}