Angular 2+解析路线数据答案

【问题标题】：Angular 2+ resolve route dataAngular 2+解析路线数据
【发布时间】：2023-03-04 20:22:01
【问题描述】：

我想从 Angular 路由解析器中的 API 返回数据，但如果 API 数据由于令牌过期而出现任何错误，我会再次刷新令牌并点击相同的 API。下面是它的代码

import { CommonUtlitiesService } from './../services/commonutilities.service';
import { UserService } from './../services/user.service';
import { Injectable } from '@angular/core';

import { Resolve } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

@Injectable()
export class CurrentUserProfileResolver implements Resolve<any> {
  constructor(private userservice:UserService,
  private commonservice:CommonUtlitiesService) {}

  resolve() {
    return  this.getactiveuserinfo();

  }

  getactiveuserinfo(maxcount=3){

  //get user data
  this.userservice.getactiveuseraccountData().subscribe(res => {
        console.log(res);
        return res;
    },
      (err) => {
         //refresh stale token
        this.commonservice.refreshToken().subscribe(res => {
          maxcount--;
          if (maxcount > 0) {
            //again hit The API
            this.getactiveuserinfo(maxcount - 1);
          }
        });

      });

  }
}

userservice的服务代码如下：

getactiveuseraccountData(){

    return this.http.post(url, dataSend, options)
      .map(res => res.json());
  }

在我的组件中，我得到的数据如下：

 let data= this.route.snapshot.data.userdata;

但这不包含任何 API 响应。

如果我将解析器中的代码更改为直接命中服务，它可以正常工作。例如：

import { CommonUtlitiesService } from './../services/commonutilities.service';
import { UserService } from './../services/user.service';
import { Injectable } from '@angular/core';

import { Resolve } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

@Injectable()
export class CurrentUserProfileResolver implements Resolve<any> {
  constructor(private userservice:UserService,
  private commonservice:CommonUtlitiesService) {}

  resolve() {
//this works fine
    return  userservice.getactiveuseraccountData()

  }

帮我解决问题

【问题讨论】：

能看到res的控制台信息吗？
@happyZZR1400 控制台消息具有正确的 API 响应，但在我的组件的解析器数据加载后调用。
好的，如果那样的话 - 我想你的问题是解析器希望得到在发生错误时不会触发的 observable。我猜你需要用“new observable()”包装你的所有逻辑并调用“next”而不是返回“res”

标签： angular angular-routing angular-services resolver

【解决方案1】：

尝试用 observable 封装 getactiveuserinfo 方法的所有逻辑：

getactiveuserinfo(maxcount=3){
    return new  Observable((observer) => {
            //get user data
             this.userservice.getactiveuseraccountData().subscribe(res => {
                console.log(res);
                // return res;
                observer.next(res);
              },
              (err) => {
                 //refresh stale token
                this.commonservice.refreshToken().subscribe(res => {
                  maxcount--;
                  if (maxcount > 0) {
                    //again hit The API
                    this.getactiveuserinfo(maxcount - 1);
                  }
                });

              });

      })   
  }

希望有帮助

【讨论】：