在角度组件之间传递数据

<app-child [data]="parentData"></app-child>

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

@Component({
  selector: 'app-child',
  template: 'Child Component: {{ data }}'
})
export class ChildComponent {
  @Input() data: any;
}

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

@Injectable()
export class DataService {
  private data: any;

  setData(data: any) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

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

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

  setData() {
    this.dataService.setData('Hello from parent component');
  }
}

@Component({
  selector: 'app-child',
  template: 'Child Component: {{ getData() }}',
  providers: [DataService]
})
export class ChildComponent {
  constructor(private dataService: DataService) {}

  getData() {
    return this.dataService.getData();
  }
}

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

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="sendData()">Send Data</button>
    <app-child (dataEvent)="receiveData($event)"></app-child>
  `
})
export class ParentComponent {
  data: any;

  sendData() {
    this.data = 'Hello from parent component';
  }

  receiveData(data: any) {
    console.log(data);
  }
}

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendData()">Send Data</button>
  `
})
export class ChildComponent {
  @Output() dataEvent = new EventEmitter<any>();

  sendData() {
    const data = 'Hello from child component';
    this.dataEvent.emit(data);
  }
}