在角度 7 中的两个兄弟组件之间传递数据答案

【问题标题】：passing data between two sibling components in angular 7在角度 7 中的两个兄弟组件之间传递数据
【发布时间】：2019-03-01 08:40:02
【问题描述】：

这里的要求是我需要在家里显示登录的用户，因为我有一个 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);
            }
        );
}

有人可以帮忙吗？

【问题讨论】：

你包含哪些提供者服务是指模块级别还是组件级别
组件级别
您是否考虑过使用BehaviorSubject 而不是Subject。
是的，首先我使用了behaviourSubject，然后我将其更改为Subject
在模块中注入服务，它会解决你的问题

标签： angular

【解决方案1】：

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

【讨论】：

【解决方案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

【讨论】：

当我们在设置数据时这样做时，我们会收到类似这样的错误“字符串”类型不可分配给“字符串”类型。 'string' 是一个原始的，但 'String' 是一个包装对象。尽可能使用“字符串”。ts(2322)
确保您没有在应用程序的任何地方使用“字符串”。我更新了我的答案，加入了现场演示。
如果我们这样做了，数据将被提供服务，然后它不会显示在主组件中，它只是显示为一个空字符串
你订阅了home组件ngOnInit事件中服务的数据变更事件吗？您是否在控制台中遇到任何错误？
我按照这种方法在 2 个子组件（我们称它们为 A 和 B）之间传递数据。我遇到的问题是在 ngOnInit 中订阅数据服务只会更新订阅该服务的子组件（A）一次。如果子组件 B 对数据服务中的变量进行任何进一步更新，则子组件 A 中的数据服务订阅不会获取对该数据服务变量的更改。如何保持子组件 A 中的数据服务订阅有效，直到我们在 ngDestroy 生命周期中取消订阅的点是什么？而是在 ngDoCheck 中调用它？

【解决方案3】：

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

【讨论】：