首页 文章

Angular 4 - 服务中的rxjs BehaviorSubject用法

提问于
浏览
2

我的服务代码如下所示 -

DataService

@Injectable()
export class DataService {
...
private serviceRequestDtoSource = new BehaviorSubject<ServiceRequestDto>(null);
serviceRequestDto$ = this.serviceRequestDtoSource.asObservable();
...
getAccountInfo(serviceRequestDto : ServiceRequestDto){
    let body = JSON.stringify(serviceRequestDto);
    let headers = new Headers({
        'Content-Type': 'application/json'
    });
    let options = new RequestOptions({ headers: headers });
    console.log("In data service.getAccountInfo");
    this.http
        .post(this.clientAccountInfoURL, body, options)
        .map((response : Response) => { return <AccountDto[]> response.json().accountDtoList})
        .do(data=> console.log('All :'+ JSON.stringify(data)))
        .subscribe( response => { 
                             this.accountList = response; 
                             this.serviceRequestDto.accountDtoList = this.accountList;
                             this.serviceRequestDtoSource.next(serviceRequestDto);
                         },
                         error => this.errorMessage = <any>error);
}

Search Component (点击服务并订阅)如下图所示 -

onSearch(value) {  
...
this.dataService.getAccountInfo(this.serviceRequestDto); //service call
this.subscription = this.dataService.serviceRequestDto$
        .subscribe( (serviceRequestDtoValue : ServiceRequestDto) => {
        // Control doesn't come here..
         this.serviceRequestDto = serviceRequestDtoValue;
         console.log('search.serviceRequestDto.length:'+this.serviceRequestDto.accountDtoList.length);
         console.log('search.serviceRequestDto.accountDtoList.name:'+this.serviceRequestDto.accountDtoList[0].name);
    });

如上所述,控制不会出现在观察组件的订阅方法中,因为没有打印任何日志,并且我也没有在控制台中收到任何错误 . 不确定我是否正确使用BehaviorSubject .

我试着按照以下链接 -

Angular 2 - Behavior Subject vs Observable? - >未按此处所述输入订阅 .
http-observables - >当我尝试这种方式时,它确实输入了订阅,但随后抛出了日志错误 -

无法读取属性xyz of null,因为组件日志甚至在我从service获取数据之前就被打印了 . 服务日志在我得到上述错误之后被打印出来 .

我的目的不是订阅SearchComponent本身的BehaviorSubject,它会点击服务 . 我只是想测试我是否从 any component中获取服务的值 . 我相信它与从任何其他需要serviceRequestDto值的组件订阅一样好,因为订阅的语法从所有组件保持相同 .

Update 1:

我尝试使用Brandon建议的ReplaySubject(1),但在订阅组件中的主题时仍然遇到错误 .

TypeError:无法读取undefined(...)的属性'name'

我更新的 service 代码现在看起来像这样 -

serviceRequestDtoSource = new ReplaySubject<ServiceRequestDto>(1);
getAccountInfo(serviceRequestDto : ServiceRequestDto){
 ...
 //Logic same as earlier
 //I'm getting all values from service here in the logs I print

 }

请注意,之前我在 service 代码中使用了以下代码 -

private serviceRequestDtoSource = new BehaviorSubject<ServiceRequestDto>(null);
serviceRequestDto$ = this.serviceRequestDtoSource.asObservable();

我更新的 Search Component 代码看起来像这样 -

this.dataService.getAccountInfo(this.serviceRequestDto);
this.dataService.serviceRequestDtoSource.subscribe((serviceRequestDtoValue : ServiceRequestDto) => {
this.serviceRequestDto = serviceRequestDtoValue;
console.log('search.serviceRequestDto.length:'+this.serviceRequestDto.accountDtoList.length);           
// prints 'search.serviceRequestDto.length:0'
console.log('search.serviceRequestDto.accountDtoList   name:'+this.serviceRequestDto.accountDtoList[0].name); // throws 'vendor.bundle.js:5764 ERROR TypeError: Cannot read property 'name' of undefined(…)' error
});

早期组件代码订阅主题的方式是不同的,虽然没有错误,但控件从未进入组件的订阅 .

我的初始代码与我现在发布的代码不同,它基于以下链接 - delegation-eventemitter-or-observable-in-angular2

1 回答

  • 5

    我认为这取决于BehaviorSubject一旦订阅就会一直发出它的第一个值(参见大理石图这里http://reactivex.io/RxJava/javadoc/rx/subjects/BehaviorSubject.html) .

    现在,在您的情况下发出的第一个值为null,即您在BehaviorSubject的构造函数中传递的值 .

    解决此问题的一种方法是使用检查非空值(现在您知道可能存在合法值)或使用运算符skip()始终跳过第一个发射值 .

相关问题