使用子组件中的@input属性调用angular 2中的服务

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

@Injectable()
export class DataService {
  getData(): string {
    return 'This is the data from the service';
  }
}

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

@Component({
  selector: 'app-child',
  template: `
    <h2>Data from parent: {{ parentData }}</h2>
    <button (click)="getData()">Get Data from Service</button>
  `,
})
export class ChildComponent {
  @Input() parentData: string;

  constructor(private dataService: DataService) {}

  getData(): void {
    const data = this.dataService.getData();
    console.log(data);
  }
}

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [parentData]="dataFromParent"></app-child>
  `,
})
export class ParentComponent {
  dataFromParent = 'Data from parent component';
}