在Angular 7中的两个兄弟姐妹组件之间传递数据

Question

这里的要求是我需要显示在家中登录的用户，因为我有一个logincomponent，homecomponent，homecomponent和数据传输，我正在使用一个名为dataService.ts的服务，对我而言，数据正在dataService.ts，但它不会来到homecontent

我的代码

logincomponent中导入的数据服务

this.username由登录

的用户名组成

登录组件：

this.ds.sendMessage(this.userName);

dataService：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
    providedIn: 'root'
})
export class DataService
{
    constructor()
    {
    }
    private apiData = new Subject<Object>();
    public apiData$ = this.apiData.asObservable();
    sendMessage(message: Object)
    {
        this.apiData.next(message);
        console.log(message);
    }
}

homecoponent：

ngOnInit();
{
    console.log('in homecomponent');
    this.DataService.apiData$
        .subscribe(
            message =>
            {
                console.log(message);
            }
        );
}

有人可以帮助吗？

Answer 1

很可能两个数据服务都不相同。请确保您在较高级别（模块，不是组件）或使用商店的两个服务中提供服务。

Answer 2

创建一个数据服务，该数据服务负责广播您传递的值：

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class DataService {
  private value: string;
  listeners = [];
  constructor() {
    this.value = '';
  }
  onDataChange(fn) {
    this.listeners.push(fn);
  }
  set setData(value: string) {
    this.value = value;
    this.listeners.forEach((fn) => {
      fn(value);
    });
  }
}

在要执行通信的每个组件中，注入数据服务。

constructor(private dataService: DataService) {}

您可以在这样的组件中设置数据的值：

this.dataService.setData= 'New value';

您可以在ngOnInit上的其他组件中订阅数据服务的价值更改事件：

ngOnInit() {
    this.dataService.onDataChange((value) => {
         this.data = value;
    });
}

实时演示

Answer 3

嗨，你可以看看这个燃料柱在这篇文章中，作者提供了有关任何类型组件之间传递数据的一些解释（兄弟姐妹 - 兄弟姐妹，父母 - 孩子，孩子 - 孩子 - 孩子...）好锁