Question

这里的要求是我需要显示在家里登录的用户，因为我有一个logincomponent，homecomponent，并且为了进行数据传输，我正在使用名为dataService.ts的服务，对我来说，数据即将到来到dataService.ts，但它没有到达homecomponent

我的代码

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

家庭伴侣：

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() {
    this.dataService.onDataChange((value) => {
         this.data = value;
    });
}

Live Demo

Answer 3

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

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

3 个答案: