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

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。 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，在某种意义上你可以订阅它，并将数据推送到所有订阅者，它不是一个可观察的提供不同的运营商，如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

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

3 个答案: