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

Question

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

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

}

第二部分

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

共享服务

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

问题是两个组件不是相互关联的，它们在两条不同的路线上运行，但是从第二个组件单击我想更改 第一个组件中声明的 OnMain 的值 strong> 基本上我想更新组件或向 第一个组件 发送一个值已更改的信号并相应地更新它。

我们将不胜感激它可能或没有帮助

Answer 1

让我们看看我是否理解正确......

您可能想要BehaviorSubject。 difference between a Subject and BehaviorSubject 是：

行为主题需要一个初始值，因为它必须始终在订阅时返回一个值，即使它没有收到next()。订阅后，它会返回主题的最后一个值。常规的 observable 只有在收到 onnext 时才会触发。

因此，当您的其他组件可能尚未创建时，当您导航到该组件时，常规的 Observable 不会触发，那里会有 Observable 的订阅者。另一方面，BehaviorSubject 总是在有订阅者时发出值。

所以你的服务看起来像这样：

// BehaviorSubject needs an initial value
private message = new BehaviorSubject<Object>(null); 

message$ = this.message.asObservable();

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

你的changeName：

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

以及订阅这个的组件：

this.ss.message$ // subscribe to the Observable
  .subscribe(item => this.onMain = item);

Answer 2

改用Subject，它允许你订阅它来接收通知，它就像一个Observable，你可以订阅它，并将数据推送给所有订阅者，它不是一个提供不同的observable操作员喜欢 RxJS Observables 的工作方式

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

现在只需将服务注入到您的组件中

export class AppComponent implements OnInit {
  onMain: Boolean;

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


    ngOnInit() {
      this.subscription = this.ss.getState()
        // Just subscribe to the Subject to receive notification
        .subscribe(currentState=> {
          console.log(currentState); // 
        });
    }

    onClick() {
      // Update the state of the shared service so that you can send any notification to all the subscribers
      this.ss.setState(true);
    }

}

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

Answer 3

使用ngrx

受 Redux 启发，为 Angular 应用程序提供 RxJS 支持的状态管理

https://github.com/ngrx/store