Angular 在两个单独的组件2之间共享数据

我有两个独立的组件，一个组件与另一个组件之间没有关系，但我的目的是与这些组件通信。我知道，与发射器共享的服务可以在父子组件之间共享数据。如果组件之间没有关系，但必须基于其他组件更改一个组件，该怎么办 例如：

    import {Component,bind,CORE_DIRECTIVES,OnInit} from 'angular2/core';
import {MainComponent} from 'src/MainComponent';
import {SharedService} from 'src/shared.service';
@Component({
    selector: 'my-app',
    directives:[MainComponent],
    template: `<h1>AppComponent {{onMain}}</h1>
    <div *ngIf="onMain == false">
       Hello
      <br> __________________________________<br>
    </div>


    })

export class AppComponent implements OnInit {
  onMain: Boolean;

  constructor(ss: SharedService) {
      this.onMain = false;
      this.ss = ss;
    }



    ngOnInit() {
    this.subscription = this.ss.getMessage()
      .subscribe(item => this.onMain=item);
  }

}

从'angular2/CORE'导入{Component，bind，CORE_指令，OnInit}；
从'src/MainComponent'导入{MainComponent}；
从'src/shared.service'导入{SharedService}；
@组成部分({
选择器：“我的应用程序”，
指令：[主组件]，
模板：`AppComponent{{onMain}}
你好

_uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

})
导出类AppComponent实现OnInit{
onMain：布尔；
构造函数（ss:SharedService）{
this.onMain=false；
this.ss=ss；
}
恩戈尼尼特（）{
this.subscription=this.ss.getMessage（）
.subscribe（item=>this.onMain=item）；
}
}

第二部分

    import {Component,bind,CORE_DIRECTIVES} from 'angular2/core';
import {SharedService} from 'src/shared.service';
@Component({
    selector: 'main-app',

    template: `<h1> MainComponent</h1>
    <button (click)="changeName()">Change Name</button>
    `
})

export class MainComponent {



    constructor(ss: SharedService) {
      this.ss = ss;
    }

    changeName() {
      this.ss.sendMessage(true);
    }
}

从'angular2/CORE'导入{Component，bind，CORE_指令}；
从'src/shared.service'导入{SharedService}；
@组成部分({
选择器：“主应用程序”，
模板：`main组件
改名
`
})
导出类主组件{
构造函数（ss:SharedService）{
this.ss=ss；
}
changeName（）{
此.ss.sendMessage（true）；
}
}

共享服务

    import { Subject } from 'rxjs/Subject';

@Injectable()
export class LandingService {
    private subject = new Subject<any>();

    sendMessage(message: any) {
        this.subject.next({ text: message });

    }

    clearMessage() {
        this.subject.next();
    }

    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}

从'rxjs/Subject'导入{Subject}；
@可注射（）
出口级着陆服务{
私有主体=新主体（）；
sendMessage（消息：任意）{
this.subject.next（{text:message}）；
}
clearMessage（）{
this.subject.next（）；
}
getMessage（）：可观察{
返回此.subject.asObservable（）；
}
}

问题是两个组件之间没有相互关联，它们在两条不同的路径上运行，但从第二个组件单击我想更改第一个组件中声明的主的值，基本上我想更新组件或向第一个组件发送一个信号，该值已更改，并且相应地更新它

使用ngrx，无论是否有帮助，我们都将不胜感激

受Redux启发，RxJS为角度应用程序提供状态管理

使用ngrx

受Redux启发，RxJS为角度应用程序提供状态管理

---

使用

Subject

取而代之，它允许您订阅它以接收通知，它就像一个可观察的对象，您可以订阅它，并将数据推送到所有订阅者，它不是一个可观察的对象，它提供了不同的操作符，就像RxJS可观察对象那样

import { Subject } from 'rxjs';


@Injectable()
export class SharedService {
  private state = new Subject<boolean>();

  // Push a state change notification to all subscribers
  updateState(newState: boolean) {
    this.state.next(newState);
  }

  getState(): Subject<boolean> {
    return this.state;
  }
}

---

您可以对其他组件执行相同的操作。只需订阅它就可以接收更改通知

使用

主题

相反，它允许您订阅它来接收通知，这就像是一个可观察对象，您可以订阅它，并将数据推送到所有订阅者，它不是一个可观察对象，它提供了不同的操作符，就像RxJS可观察对象那样

import { Subject } from 'rxjs';


@Injectable()
export class SharedService {
  private state = new Subject<boolean>();

  // Push a state change notification to all subscribers
  updateState(newState: boolean) {
    this.state.next(newState);
  }

  getState(): Subject<boolean> {
    return this.state;
  }
}

---

您可以对其他组件执行相同的操作。只要订阅它就可以收到更改通知

让我们看看我是否正确理解了这一点

您可能需要一个

行为主题

。最重要的是：

行为主体需要初始值，因为它必须始终在订阅时返回值，即使它尚未收到

next（）

。订阅后，它返回主题的最后一个值。常规可观察对象仅在收到onnext时触发

因此，当您的其他组件可能尚未创建时，当您（例如）导航到该组件时，常规Observable将不会触发，因为该组件将有一个Observable的订户<代码>行为主体另一方面，如果有订户，则总是发出值

因此，您的服务将如下所示：

//BehaviorSubject需要一个初始值
私有消息=新行为主体（null）；
message$=this.message.asObservable（）；
发送消息（消息）{
this.message.next（{text:message}）；
}

您的

更改名称

：

changeName（）{
此.ss.sendMessage（true）；
}

以及订阅此的组件：

this.ss.message$//订阅可观察的
.subscribe（item=>this.onMain=item）；

让我们看看我是否正确理解了这一点

您可能需要一个

行为主题

。最重要的是：

行为主体需要初始值，因为它必须始终在订阅时返回值，即使它尚未收到

next（）

。订阅后，它返回主题的最后一个值。常规可观察对象仅在收到onnext时触发

因此，当您的其他组件可能尚未创建时，当您（例如）导航到该组件时，常规Observable将不会触发，因为该组件将有一个Observable的订户<代码>行为主体另一方面，如果有订户，则总是发出值

因此，您的服务将如下所示：

//BehaviorSubject需要一个初始值
私有消息=新行为主体（null）；
message$=this.message.asObservable（）；
发送消息（消息）{
this.message.next（{text:message}）；
}

您的

更改名称

：

changeName（）{
此.ss.sendMessage（true）；
}

以及订阅此的组件：

this.ss.message$//订阅可观察的
.subscribe（item=>this.onMain=item）；

它的工作原理与共享服务不同如果组件之间存在关系，那么它将工作，否则它将不工作不管怎样，自从我开始使用angular以来，我一直使用服务在组件之间进行通信，所以，我试图在第二个组件的基础上更新ist组件，但是这些组件之间没有关系