从angular 4中的另一个组件访问另一个组件

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent)
  childComponent: ChildComponent;

  ngAfterViewInit() {
    // 访问子组件的属性和方法
    console.log(this.childComponent.childProperty);
    this.childComponent.childMethod();
  }
}

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

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

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (dataEvent)="receiveData($event)"></app-child>
  `
})
export class ParentComponent {
  receiveData(data: string) {
    // 处理子组件传递过来的数据
    console.log(data);
  }
}

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

@Injectable()
export class DataService {
  sharedData: string;

  setData(data: string) {
    this.sharedData = data;
  }

  getData() {
    return this.sharedData;
  }
}

@Component({
  selector: 'app-sender',
  template: `
    <button (click)="sendData()">Send Data</button>
  `
})
export class SenderComponent {
  constructor(private dataService: DataService) {}

  sendData() {
    const data = 'Hello from sender component';
    this.dataService.setData(data);
  }
}

@Component({
  selector: 'app-receiver',
  template: `
    <button (click)="receiveData()">Receive Data</button>
  `
})
export class ReceiverComponent {
  constructor(private dataService: DataService) {}

  receiveData() {
    const data = this.dataService.getData();
    // 处理从发送组件接收到的数据
    console.log(data);
  }
}