在订阅方法之外获取变量数据

Question

我正在尝试为用户路由实现 canActivate，在此之前我想检查访问令牌是否仍然有效。因此我实现了这样的东西

export class AuthGuard implements CanActivate {
  data:Array<Object>;
  constructor(private base: BaseService){}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {

    var session: any = { token: localStorage.getItem('abc') };   

    this.base.valid(session).subscribe(result => {
      this.data=result;
      console.log(this.data); <-- first 
    });

    console.log(this.data); <-- second
    return true;
  }
}

在这里，当我控制它时，我可以在订阅方法中获取数据变量，但在该方法之外给出 undefined 值。我如何在方法之外访问它。

Answer 1

BaseService.valid returns 一个在 canActivate 方法 returns 之后发出的 Observable。

订阅块后的console.log先执行，此时this.data还未定义

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): boolean {
  // 1.
  var session: any = { token: localStorage.getItem('abc') };   

  this.base.valid(session).subscribe(result => {
    // 3.
    this.data=result;
    console.log(this.data); 
  });


  // 2.
  console.log(this.data); 
  return true;
}

Answer 2

那是不可能的。原因是，您正在尝试呈现一个值，其值会被 Observable 不断改变。

现在，当您尝试读取 outside console.log 时，您会得到未定义的值，因为该值尚未由 Observable [=11] 设置=].当值更改时（假设在 1 秒后），outer console.log 已经执行，因此您不会看到 this.data

的任何更改

为了监视其值的变化，将函数调用放在 subscribe 块本身中。

更新 1

根据您的评论，您

Answer 3

public new_data:any=[];
this.base.valid(session).subscribe(result => {
  this.data=result;
  for(let data of this.data) {
    this.new_data.push(id:data.id, name:data.name)
  }
    console.log(this.new_data); <-- first
});
 console.log(this.new_data); <-- Second

Answer 4

为了能够将数据推送到您定义的数组，首先您必须将其初始化为一个空数组，因此：

而不是：

data:Array<Object>

试试这个：

data: Array<any> = new Array<any>();

这是我用的，希望对你有帮助。

在订阅方法之外获取变量数据

getting variable data outside subscribe method

angular

angular4-httpclient

angular-guards

更新 1