Question

组件没有父/子关系。也就是说，第一个组件没有嵌套在其中的第二个组件的标签。不看起来像这样：

<app-parent>
  <app-child></app-child>
</app-parent>

就是这样：

<app-root>
  <app-componentOne></app-componentOne>
  <app-componentTwo></app-componentTwo>
</app-root>

第一个组件有一个无序列表<ul>。当我点击其中一个项目<li>时，我希望其他组件显示有关所点击项目的信息。

我现在不是在寻找代码解决方案（除非你想要）我只想要一个我可以学习创建自己代码的概念。

干杯。

更新

我最终使用BehaviorSubject RxJS消息服务将对象传递给接收组件。感谢此YouTube视频：Sharing Data between Components in Angular，（选项＃4）。

我认为这已经解决了，但是如果你想增加更多，请随意。

Answer 1

我想很多人都有这个问题。我也是如此。我希望能够在整个应用程序中共享数据，而无需通过中间件组件传递大量数据。我最终使用无效数据存储（使用RxJs）为组件提供数据流。这些可以从任何东西加载 - 一个API调用，或一些本地数据。

例如，这是一个延迟加载数据存储的模式 -

@Injectable()
export class CustomerStore {

  // for lazy-loading
  initialized = false;

  // prefer a ReplaySubject with a buffer of 1
  private subject = new ReplaySubject(1);

  constructor(private customerStore: CustomerStore) {

  }

  // expose as an observable stream
  getCustomer(): Observable<Customer> {

    // asynchronously loads the data on the first subscription to the store
    if (!this.initialized) {
      this.initialized = true;
      this.customerService.retrieveCustomer().subscribe((customer) => {
        this.subject.next(customer);
      });
    }

    return this.subject.asObservable();
  }

}

有关详细信息，请查看http://blog.ippon.tech/reactive-data-using-angular-and-rxjs/

我也是这篇文章的作者。如果您对StackOverflow答案的评论有任何问题，请随时向我提问。

Answer 2

你应该使用Angular5最被低估的功能之一：Services。尽管BehaviorSubject可以很好地完成这项工作，但Services更容易维护。你就是这样做的：

创建Service。

从@ angular / core＆＃39;;

@Injectable()
export class DemoService {
  sharedVariable: number = 1;

  constructor() { }

}

2。将其注入需要值/数据的组件。

import { Component, OnInit } from '@angular/core';
import { DemoService } from '../demo.service';


@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
  constructor(private service: DemoService) { }

  ngOnInit() {
    console.log(this.service.sharedVariable)
  }
}

在constructor初始化服务后，您可以使用this及其各自的功能或变量来引用该服务。

Stackblitz demo here

希望这有帮助！

Angular 5x - 将值从一个组件发送到另一个组件而没有子/父关系

2 个答案: