角5订阅和退订可观察

Question

我必须从两个订阅服务器获取数据，但我总是获取第一个订阅服务器的数据。

我有一个数据共享服务：

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


@Injectable()
export class DataService {

    private source = new BehaviorSubject<any>('');
    data = this.source.asObservable();

    constructor() { }

    update(values: any) {
        this.source.next(values);
    }
}

在离开搜索组件之前，我调用update方法。
现在，我在results组件上。我得到的共享数据如下：

constructor(private dataSvc: DataService,
        private router: Router,
        private rideStore: RideStore) { }

    ngOnInit() {
        this.getData();
    }

    getData() {
        this.subscription = this.dataSvc.data.take(1).subscribe(
            data => this.data = data ? data : undefined,
            err => console.log(err),
            () => this._isValid()
        );
    } 

我的问题是：我需要共享数据来订阅另一个可观察的数据。首先，我构造了一个物体乘坐，在我调用搜索方法之后

    search() {
    this.rideStore.searchRides(this.ride).subscribe(
        rides => {
            // this.dataSvc.update(rides);
            this.rides = rides;
            console.log('results', this.ride);
        },
        err => console.log('err', err)
    );
}

问题是我总是从数据服务获取数据，而不是从api调用。api工作导致我在存储中拦截结果，而不是在组件中。那么，我如何才能停止订阅第一个可观察到的，并订阅第二个？

Answer 1

在多个组件中共享数据时，行为主题非常有用。你可以想订阅多少次就订阅多少次。您也可以使用unsubscribe方法取消订阅。

让我们使用上述服务并订阅该服务以获取数据：

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

@Injectable()
export class DataService {
    public source = new BehaviorSubject<any>(' ');
    data = this.source.asObservable();
    constructor() { }
    update(values: any) {
        this.source.next(values);
    }
}

在这里，我声明了一个初始值为空字符串的行为主题。请记住，您需要为您的行为主题提供一个默认值，无论是空白字符串还是任意数字。之后，我使用asObservable（）方法初始化了一个可观察数据。最后，我创建了一个使用next（）方法更新行为主题源值的方法。

现在，我将在我们的组件中使用此服务从我们的行为主体获取数据。

subscription: any;

constructor( private dataSvc: DataService ) {
    this.subscription = this.dataSvc.data.subscribe(
        data => console.log('Data:', data),
        err => console.log(err),
        () => console.log('complete')
    );
}

在这里，我将我们的DataService注入到我们的组件中，并创建了该DataService dataSvc的一个实例。我使用dataSvc调用我们的数据可观察，并订阅该数据可观察，以从我们的行为主体获取数据。因此，我将通过以下代码在浏览器控制台中获得的输出是：

Data: 

所以我得到这个空，因为我使用了一个空字符串作为我的行为主体的默认值。

现在要更新行为主体的值，我必须使用dataSvc服务的更新方法，将空字符串的行为主体的值更新为新值。

//Insert this before subscribing the data observable
this.dataSvc.update('abc');

//Output in the console.
Data: abc

现在该值已从空字符串更新为abc。这将反映在订阅此行为主体的每个组件中。

所以，如果我想退订这个订阅。所以我们必须将订阅初始化为

subscription: ISubscription;

然后每当我们想退订的时候，我们就会像这样调用退订方法

this.subscription.unsubscribe();

因此，特定组件的完整代码如下：

import { Component } from '@angular/core';
import { DataService } from "./data.service";
import {ISubscription} from "rxjs/Subscription";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  subscription: ISubscription;

  constructor( private dataSvc: DataService ) {
    this.subscription = this.dataSvc.data.subscribe(
      data => console.log('Data:', data),
      err => console.log(err),
      () => console.log('complete')
    );
    this.dataSvc.update('abc');
    this.subscription.unsubscribe();
  }
}