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

Question

我有两个单独的组件，另一个组件没有另一个组件的关系，但我的目的是传达我知道的这些组件，我知道我知道的共享服务与发射机可以共享父母组件之间的数据，如果如果组件之间没有关系，但必须基于Othe更改一个组件例如：

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

sharedService

    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 在>第一个组件基本上我想更新组件或将信号发送到第一个组件该值已更改并相应地更新。

可能会因其可能或没有帮助而受到赞赏

Answer 1

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

您可能想要一个BehaviorSubject。Subject和BehaviorSubject之间的区别是：

行为主题需要一个初始值，因为即使尚未收到next()，它也必须始终返回订阅中的值。订阅后，它返回主题的最后值。一个常规观察到仅在接收到Onnext时才触发。

因此，当您的其他组件可能还没有创建时，当您导航到该组件时，常规可观察到的可观察到，在该组件中会有一个可观察到的订户。另一方面，如果有订阅者，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，它允许您订阅它以接收通知，就像可以订阅的意义上可以观察到的，并将数据推向所有订户，它是不是一个可观察到的可观察到的操作员，例如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;
  }
}

现在只是将服务注入您的组件

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

rxjs供电的角度应用程序管理，灵感来自redux

https://github.com/ngrx/store