在角度 7 中的两个同级组件之间传递数据

Question

这里的要求是我需要显示登录的用户，在家里，因为我有一个 logincomponent ，homecomponent 和数据传输我使用名为 dataService.ts 的服务，对我来说数据正在进入 dataService。 ts 但它没有进入 homecomponent

我的代码

在 loginComponent 中导入数据服务

this.userName 由登录的用户名组成

登录组件：

this.ds.sendMessage(this.userName);

数据服务：

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

家庭组件：

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

有人可以帮忙吗？

Answer 1

很可能，这两个 DataService 并不相同。 请确保您在更高级别（模块，而不是组件）上提供服务或使用两个服务所指的商店。

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数据服务的值更改事件：

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

现场演示

Answer 3

嗨，您可以在这篇文章中查看这个基于fire-base 的帖子，作者提供了有关在任何类型（兄弟姐妹 - 兄弟姐妹，父 - 子，子 - 子...）的组件之间传递数据的一些解释