关于前端:在-NgModule-里通过依赖注入的方式注册服务实例

上面是在 NgModule 中注册一个 service 的典型例子。

import {NgModule} from '@angular/core';

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

@NgModule({providers: [AuthService],
})
class ExampleModule {}

下面的代码，因为 provide 和 useClass 属性值都雷同，所以其实是简写模式 (shorthand)，残缺的写法：

import {NgModule} from '@angular/core';

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

@NgModule({
  providers: [
    {
      provide: AuthService,
      useClass: AuthService,
    },
  ],
})
class ExampleModule {}

对象中的 provide 属性是咱们正在注册的提供者的令牌。这意味着 Angular 能够应用 useClass 值查找 AuthService 令牌下存储的内容。

Angular 依赖注入为利用程序开发提供了许多益处。首先，咱们当初能够领有两个具备完全相同类名的 providers，Angular 在解析正确的服务时不会有任何问题。其次，咱们还能够应用不同的提供者笼罩现有提供者，同时放弃令牌雷同。

原始的 AuthService 类的实现：

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

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

  authenticateUser(username: string, password: string): Observable<boolean> {
    // returns true or false
    return this.http.post('/api/auth', { username, password});
  }

  getUsername(): Observable<string> {return this.http.post('/api/user');
  }

}

在 LoginComponent 里生产上述 Service 类的代码：

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

@Component({
  selector: 'auth-login',
  template: `
    <button>
      Login
    </button>
  `
})
export class LoginComponent {constructor(private authService: AuthService) {}

  login() {
    this.authService
      .authenticateUser('toddmotto', 'straightouttacompton')
      .subscribe((status: boolean) => {// do something if the user has logged in});
  }

}

在 UserInfoComponent 里应用这个 Service class：

@Component({
  selector: 'user-info',
  template: `
    <div>
      You are {{username}}!
    </div>
  `
})
class UserInfoComponent implements OnInit {

  username: string;

  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.authService
      .getUsername()
      .subscribe((username: string) => this.username = username);
  }

}

把两个 Component Class 和一个 Service class 封装到一个 NgModule 里：

import {NgModule} from '@angular/core';

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

import {LoginComponent} from './login.component';
import {UserInfoComponent} from './user-info.component';

@NgModule({declarations: [LoginComponent, UserInfoComponent],
  providers: [AuthService],
})
export class AuthModule {}

也可能存在其余组件应用雷同的 AuthService。当初假如有一个新的需要，须要将咱们的登录身份验证形式，更改为一个应用 Facebook 登录用户的库。

最笨的方法是遍历每一个组件实现，并更改所有导入以指向这个新的提供者，然而咱们能够利用依赖注入，轻松笼罩咱们的 AuthService 以应用 FacebookAuthService：

import {NgModule} from '@angular/core';

// totally made up
import {FacebookAuthService} from '@facebook/angular';

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

import {LoginComponent} from './login.component';
import {UserInfoComponent} from './user-info.component';

@NgModule({declarations: [LoginComponent, UserInfoComponent],
  providers: [
    {
      provide: AuthService,
      useClass: FacebookAuthService,
    },
  ],
})
export class AuthModule {}

下面的例子用不同的值替换了 useClass 属性。这样，咱们能够在咱们的应用程序中的任何中央应用 AuthService – 而无需进行进一步的更改。

这是因为 Angular 应用 AuthService 作为令牌来搜寻咱们的提供者。因为咱们已将其替换为新类 FacebookAuthService，因而咱们所有的组件都将应用它。