角度使用父组件到子组件的多个服务实例

import { Component } from '@angular/core';
import { DataService } from 'app/data.service';
import { LoggerService } from 'app/logger.service';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [dataService]="dataService" [loggerService]="loggerService"></app-child>
  `,
  providers: [DataService, LoggerService]
})
export class ParentComponent {
  constructor(private dataService: DataService, private loggerService: LoggerService) {}
}

import { Component, Input } from '@angular/core';
import { DataService } from 'app/data.service';
import { LoggerService } from 'app/logger.service';

@Component({
  selector: 'app-child',
  template: `
    <p>Data: {{ data }}</p>
    <button (click)="log()">Log</button>
  `
})
export class ChildComponent {
  @Input() dataService: DataService;
  @Input() loggerService: LoggerService;
  data: string;

  ngOnInit() {
    this.data = this.dataService.getData();
  }

  log() {
    this.loggerService.log('Logging data: ' + this.data);
  }
}