在Angular2中，如何在两个组件之间传输数据。 （他们是兄弟姐妹）

Question

我知道在子组件和父组件之间传输数据的方法。

现在，我想将数据从一个组件传输到另一个组件。这两个组件是兄弟。它们具有相同的父组件。

我是angular2的新手。帮助

Answer 1

您可以使用服务传输数据（共享数据）。创建一个服务，其中一个组件可以将数据发送到服务，而其他组件可以接收数据。

这是一个例子

SharedService.ts

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

export class SharedService {

    public data$ = new BehaviorSubject<any>(null);

    shareData(data: any) {
        this.data$.next(data);
    }
}

first.component.ts（发送数据）

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

import { SharedService } from './SharedService.service';

@Component({
  selector: 'first',
  templateUrl: './first.html'
})
export class firstCompoenent {
    constructor(private sharedService: SharedService) { }

    shareData(data) {
        this.sharedService.shareData(data);
    }
}

second.component.ts（接收数据）

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

import { SharedService } from './SharedService.service';

@Component({
  selector: 'second',
  templateUrl: './second.html'
})
export class secondCompoenent {
    sharedData: any

    constructor(private sharedService: SharedService) {
        this.sharedService.data$.subscribe(data => this.sharedData = data);
    }
}