角度：RxJs/BehaviorSubjectを使用してコンポーネント間でデータを動的に共有する

Question

私は2つの兄弟コンポーネントを持ち、並んで表示しています。コンポーネント-A &コンポーネント-Bとしましょう。

コンポーネント-Aにはフォームコントロールがあります。ユーザーがフォームに入力すると、ビジネスロジックを実行し、コンポーネントBにデータを表示する必要があります。

データを共有するサービスを作成しました。現在はデータが利用可能Component-Bユーザーが何らかの変更を行ったが自動的に表示されない場合、Component-Bに「更新」ボタンを配置し、ボタンをクリックするとデータが表示されます。

私が達成したいのは、ユーザーがクリックしなくても、コンポーネント-Aからコンポーネント-Bへのスムーズなデータフローです。何らかの理由で、私はコンポーネントBでサービスを購読できません。

<div class="form-group"> 
     <div class="form-inline"> 
      <label for="searchbox" class="control-label">Search : </label> 
      <input id="searchbox"class="form-control" type="text" #searchValue (keyup)="0"/> 
      <button class="btn btn-success" (click)="getSelectedComponents()">Add</button> 
     </div>   
    </div> 

：@angularバージョン4.0.0〜

Nav.Service.ts

import { Injectable } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class NavService { 

    // Observable navItem source 
    private _navItemSource = new BehaviorSubject<string>(null); 

    // Observable navItem stream 
    navItem$ = this._navItemSource.asObservable(); 

    changeNav(query: string) { 
    this._navItemSource.next(query); 
    console.log("Inside changeNav",query) 
    } 

} 

コンポーネント

Private getSelectedComponents() { 
     this._navService.changeNav(this.searchValue) //dataFromControls is string data.. 
     this.dataFromSisterComponent = ''; 
} 

HTMLを使用して

HTML以下で

コンポーネントB

import { Component, Input, Output, EventEmitter, ViewChild, OnInit, OnDestroy} from '@angular/core'; 
import { FormControl, FormGroup} from '@angular/forms'; 
import { DataService} from '../../Services/DataService/data.service'; 
import { Subscription } from 'rxjs/Subscription'; 
import { NavService } from '../../Services/NavService/nav.service'; 

@Component({ 
    moduleId: module.id, 
    selector:'ComponentB', 
    templateUrl: 'Component-B.component.html', 
}) 
export class Component-B implements OnInit { 
    subscription: Subscription; 
    dataFromComponentA: string; 

    shows: any; 
    error: string; 
    item: string; 

    constructor(private dataService: DataService,private _navService: NavService) 
    {  
    } 

    ngOnInit() { 
     this.getQuery(); 
    } 

    getQuery() { 
     this.subscription = this._navService.navItem$ 
     .subscribe(
     item => this.item = item, 
      err => this.error = err 
     ); 
     dataFromComponentA=this.item 
     console.log("Inside getquery",this.item) 
    } 

    ngOnDestroy() { 
     this.subscription.unsubscribe(); 
     console.log("ngOnDestroy") 
    } 
} 

HTML

、私は、ユーザーがComponentAに変更を加えたとき における{{dataFromComponentA}}自動的にデータを表示します。現在、 「更新」ボタンをクリックするとデータが表示され、 はこのボタンをクリックしないようにしたいと考えていました。

<h3>Template Components 123 </h3> 
<button class="btn btn-success" (click)="getQuery()">Refresh</button> 
<p><b>Value coming from Component-A</b> 
    {{ dataFromComponentA }} 
    OK </p> 

Answer 1

あなたはそれが働いていた...あなたはsubscribe

getQuery() { 
    this.subscription = this._navService.navItem$ 
    .subscribe(
     item => { 
     this.item = item, 
     dataFromComponentA=this.item 
     console.log("Inside getquery",this.item) 
     }, 
     err => this.error = err 
    ); 
}