BehaviorSubject не может получить значение с подпиской - PullRequest
Новая
       7

BehaviorSubject не может получить значение с подпиской

0 голосов
/ 26 мая 2018

В моем приложении Angular

Я сделал несколько попыток получить значения, используя BehaviorSubject, чтобы узнать, когда значение было изменено или получено.Я не могу получить значения до загрузки компонента.

По этой ссылке вы можете увидеть, что вы возвращаете:

https://dev.moip.com.br/v1.5/reference#listar-planos

data.service.ts: 

dataOnChanged: BehaviorSubject<any> = new BehaviorSubject({});

getData() {
    return new Promise((resolve, reject) => {
        this.http.get(this.api_URL + 'plans/, this.httpOptions).subscribe((data: any) => {

            // the result is
            // data = {plans: Array(5)}

            this.dataOnChanged.next(data);
            resolve(data);
        },
            (response: any) => {
                reject(response.error);
            });
    });
}

resol.service.ts: 

constructor(
    private dataService: DataService, {
}

* Resolve
 * @param {ActivatedRouteSnapshot} route
 * @param {RouterStateSnapshot} state
 * @returns {Observable<any> | Promise<any> | any}
 */
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    return new Promise((resolve, reject) => {
        Promise.all([
            this.dataService.getData()
        ]).then(
            () => {
                resolve();
            },
            reject
        );
    });
}

rout.module.ts: 

        {
            path: 'home',
            component: HomeComponent,
            resolve: {
                data: ResolveService,
            },
        },

home.component.ts: 

constructor(
    public data: DataService,
) {

    this.dataService.dataOnChanged.subscribe((result: any) => {
        // no result
        debugger;
    });

Проблема в том, что я не могу загрузить данные, возвращаемые HTTP GET, перед загрузкой компонента.Мне нужно загрузить данные раньше и показать экран.

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

Я думаю, что лучший способ получить значение будет получить его из ActivatedRoute

В вашем компоненте, если вы введете ActivatedRoute: 

constructor(ars: ActivatedRoute) {
  console.log(ars.snapshot.data.data) // This will log your value here
}

Таким образом, вы не сможетене нужен объект BehaviourSubject.

Вот пример StackBlitz.

Когда вы посещаете маршрут / about, он получит значение с задержкой в ​​2 секунды, чтобы продемонстрировать

0 голосов
/ 26 мая 2018

Использование BehaviorSubject здесь избыточно, вместо этого вы можете получить доступ к разрешенным данным с помощью свойства data объекта снимка ActivatedRoute объекта или подписаться на ActivatedRoute data Свойство, которое содержит статические и разрешенные данные текущего маршрута
, рекомендуется использовать Наблюдаемые над обещаниями ,При переходе к обещанию вы потеряете возможность отмены запроса и возможность связывать операторов RxJS.

С Документы

  1. Положитесь на маршрутизатор для вызова распознавателя.Не беспокойтесь обо всех способах навигации пользователя.Это работа роутера.Запишите этот класс и позвольте маршрутизатору взять его оттуда.

  2. Наблюдаемое, предоставленное маршрутизатору, должно завершиться.Если наблюдаемое не завершается, навигация не будет продолжаться.

data.service.ts: 

 getData():Observable<any> {
        return this.http.get(this.api_URL + 'plans/, this.httpOptions);
            }

resol.service.ts: 

import { Injectable } from '@angular/core';
    import { Resolve } from '@angular/router';
   import {Observable} from 'rxjs';

    @Injectable()
    export class resolver implements Resolve<Observable<any>> {
      constructor(private service:Service) {}

      resolve() {
        return this.dataService.getdata();
      }
    }

rout.module.ts: 

 {
            path: 'home',
            component: HomeComponent,
            resolve: {
                data: resolver,
            },
        },

home.component.ts:, 

  constructor( private route:ActivatedRoute) {
                 this.route.data.subscribe(value=>{
                       console.log(value);
                       });}

или 

 constructor( private route:ActivatedRoute) {
                 this.item=this.route.snapshot.data;
                    console.log(this.route.snapshot.data);
                     }

STACKBLITZ DEMO

...