angular - 如何在 Angular 6/5/4 中没有父子关系的情况下将组件 A 之间的数据传递给组件 B

Question

我不知道如何在 angular 6 中的两个组件之间传递数据或变量，我接受任何建议，请帮助我

Answer 1

您需要的解决方案在此可用 tutorial由 Jeff Delaney 撰写.

不相关的组件:与服务共享数据

在缺乏直接连接的组件(例如 sibling 、孙子等)之间传递数据时，您应该使用共享服务。当您有应该同步的数据时，我发现 RxJS BehaviorSubject 在这种情况下非常有用。

您也可以使用常规的 RxJS Subject 通过服务共享数据，但这就是我更喜欢 BehaviorSubject 的原因。

1. 它将始终返回订阅的当前值——有无需调用onnext
2. 它有一个 getValue() 函数来提取最后一个值作为原始数据。
3. 它确保组件总是接收到最新的数据

在服务中，我们创建了一个私有(private)的 BehaviorSubject 来保存消息的当前值。我们定义一个 currentMessage 变量来处理这个数据流作为一个将被组件使用的可观察对象。最后，我们创建函数调用 BehaviorSubject 上的 next 来改变它的值。

父组件、子组件和兄弟组件都接受相同的处理。我们在构造函数中注入(inject) DataService，然后订阅 currentMessage 可观察对象并将其值设置为等于消息变量。

现在，如果我们在这些组件中的任何一个中创建一个函数来更改消息的值。当执行此函数时，新数据会自动广播到所有其他组件。

data.service.ts:

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

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}

sibling.component.ts:

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

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}