Angular:使用 RxJs/BehaviorSubject 在组件之间动态共享数据
Angular: Share data dynamically between components using RxJs/BehaviorSubject
我有两个同级组件并排显示,比方说组件 A 和组件 B。
Component-A 有表单控件,一旦用户填写表单,我需要执行一些业务逻辑并将数据显示到Component-B。
我已经创建了服务来共享数据。当前,当用户进行任何更改时,数据在组件 B 中可用,但它不会自动显示,我在组件 B 上放置了 "refresh" 按钮,当我单击该按钮时,数据正在显示。
我想要实现的是在没有任何用户点击的情况下从组件-A 到组件-B 的数据流顺畅。由于某种原因,我无法订阅组件 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
In below html, I want to display data automatically in
{{dataFromComponentA}} when user made changes in ComponentA. Currently
data is getting displayed when I click on "Refresh" button and I
wanted to avoid this button click.
<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>
您需要传递给 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
);
}
我有两个同级组件并排显示,比方说组件 A 和组件 B。
Component-A 有表单控件,一旦用户填写表单,我需要执行一些业务逻辑并将数据显示到Component-B。
我已经创建了服务来共享数据。当前,当用户进行任何更改时,数据在组件 B 中可用,但它不会自动显示,我在组件 B 上放置了 "refresh" 按钮,当我单击该按钮时,数据正在显示。
我想要实现的是在没有任何用户点击的情况下从组件-A 到组件-B 的数据流顺畅。由于某种原因,我无法订阅组件 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
In below html, I want to display data automatically in {{dataFromComponentA}} when user made changes in ComponentA. Currently data is getting displayed when I click on "Refresh" button and I wanted to avoid this button click.
<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>
您需要传递给 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
);
}