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

Question

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

Answer 1

您需要的解决方案在此可用 tutorialJeff Delaney写的。

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

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

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

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

在服务中，我们创建一个私有的 BehaviorSubject 来保存消息的当前值。我们定义了一个 currentMessage 变量，将这个数据流作为一个 observable 来处理，供组件使用。最后，我们创建函数，调用 BehaviorSubject 上的 next 来更改其值。

父组件、子组件和兄弟组件都接受相同的处理。我们在构造函数中注入 DataService，然后订阅 currentMessage observable 并将其值设置为等于 message 变量。

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

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")
  }

}

Answer 2

如this 示例中所示，您可以将组件放置在要接收参数的位置并添加导入，如下所示：

@Component({
  selector: 'app-astronaut',
  template: ...
})
export class AstronautComponent implements OnDestroy {
  @Input() astronaut: string;
}

在您想要传递该数据的 html 组件中，您可以这样做：

<app-astronaut 
  [astronaut]="astronaut">
</app-astronaut>

Answer 3

您可以使用共享服务，然后将其注入您的组件中。您可以在here 找到一些很好的解释，例如：

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
@Injectable()
export class SharedService {
 private msgRoot = new BehaviorSubject<string>("default message");
 currentMsg = this.msgRoot.asObservable();
 changeMessage(message: string) {
   this.msgRoot.next(message);
 }
}

在组件中：

export class ParentComponent implements OnInit {
  message = "Default message!";
  nMsg;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.currentMsg.subscribe(msg => (this.nMsg = msg));
  }

  receiveMessage($event) {
    this.nMsg= $event;
  }
}