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