了解 相依注入 Service

有時我們需要再多個components共享資料，例如上圖的 Applcation 架構中，想要共用LogService 以及User的Service，但不希望重複的code在每個components都寫(只要一份code)，

這時我們就可以透過Service達到這樣的目的，Service可以透過httpClientModule 幫我們分享資料，

簡單練習在 About 和 User 兩個components 共享 Logging Service。

建立service files

ng g service logging

logging.service.ts

export class LoggingService {
  constructor() { }
  logStatusChange(status: string) {
    console.log('A server  status changed, new status' + status);
  }
}

然後我們可以在 component 裡 把這個物件 new 起來

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html'
})
export class AboutComponent {

  onCreateAccount(accountStatus: string) {
    const service = new LoggingService();
    service.logStatusChange(accountStatus);
  }
}

但是如果要透過這樣使用 Service的話其實相當不方便，可以透過相依注入的方式
將我們要用的 Service 引用到 Component 內，在 Component 層級使用只要在
Component 中的 provider 加入你要用的 Service，並且在 constructor 引用，就可以在 component 的任何地方使用

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  providers: [LoggingService]
})
export class AboutComponent {
  @Output() accountAdded = new EventEmitter<{ name: string, status: string }>();
  constructor(private _loggingService: LoggingService) {

  }
  onCreateAccount(accountName: string, accountStatus: string) {
    this.accountAdded.emit({
      name: accountName,
      status: accountStatus
    });
    // console.log('A server status changed, new status: ' + accountStatus);
    const service = new LoggingService();
    service.logStatusChange(accountStatus);
  }
}

參考

1. Angular 4 教學 - Service
2. [Angular 6] Service