Angular：使用RxJs/BehaviorSubject在組件之間動態地共享數據

Question

我有兩個兄弟組件並排顯示，比方說Component-A &組件-B。

Component-A具有表單控件，一旦用戶填寫表單，我需要執行一些業務邏輯並將數據顯示到Component-B中。

我已經創建了服務來共享數據。當前數據可用Component-B當用戶進行任何更改但不會自動顯示時，我在組件-B上放置了「刷新」按鈕，並且當我單擊按鈕時，數據正在顯示。

我想實現的是從Component-A到Component-B的流暢數據流，無需用戶點擊。出於某種原因，我無法訂閱Component-B中的服務。

使用@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) 
    } 

} 

組件-A

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

HTML：

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

元器件-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

在下面的HTML，我想在 自動顯示數據{{dataFromComponentA}}當用戶作出ComponentA變化。目前 數據正在顯示，當我點擊「刷新」按鈕，我想 避免這個按鈕點擊。

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