Question

在My Angular Application中

我多次尝试使用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);
            });
    });
}

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

routes.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返回的数据。我需要先加载数据并显示屏幕。

Answer 1

此处使用BehaviorSubject是多余的，您可以使用 ActivatedRoute’s snapshot 对象的data属性访问已解析的数据，也可以订阅 { {3}} data 保存当前路线的静态和已解析数据的属性
建议使用 ActivatedRoute 。通过转换为承诺，您将失去取消请求的能力以及链接RxJS运营商的能力。

来自 Observables over promises

依靠路由器来调用解析器。不要担心所有的问题   用户可以导航的方式。这是路由器的工作。   写下这门课程，让路由器从那里拿走它。



提供给路由器的observable必须完成。如果       observable没有完成，导航将不会继续。

<强> data.service.ts：

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

<强> resolve.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();
      }
    }

<强> routes.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);
                     }

<强> Docs

Answer 2

我认为获得该值的最佳方法是从ActivatedRoute

获取它

在您的组件中，如果您注入ActivatedRoute：

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

这样，您就不需要BehaviourSubject。

Here is an example on StackBlitz.

当你访问/ about路线时，它将获得一个2秒延迟的值来演示

使用subscribe，BehaviorSubject无法接收值

在My Angular Application中

2 个答案: