auth.service.ts

Question

我正在使用BehaviorSubject来保存与其他组件共享的变量（用户名），它在我的模板上很好地显示了用户名。但是，我希望能够在服务中使用我的BehaviorSubject的值，然后将该值（用户名）用作此类方法的参数：myMethod（username）{do stuff}。

问题似乎是调用该方法时BehaviorSubject值尚未准备好。我试过在构造函数和ngOnInIt中都调用该方法，如果我将其记录到控制台，它首先显示它是未定义的，然后最终使用正确的（用户名）值记录。是否可以使用BehaviorSubject获取作为参数传递给方法的值？

在我的示例中，我有一个auth.service，其中包含我的BehaviorSubject（不显示登录/身份验证内容，因为它与该示例无关）。然后将该BehaviorSubject订阅到我的newform.component.ts中。我可以在newform模板上显示值，但这不是我想要的。我正在努力的是订阅newform.component中的BehaviorSubject值，并将其传递给调用服务的方法，该服务应根据用户名返回位置数组。我需要该位置数组来填充newform模板上的输入，这就是为什么我试图在ngOnInIt上调用它的原因，因此我可以在用户开始填写表单之前获取输入的位置。

下面是一些代码：

auth.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private accountInfoSource = new BehaviorSubject<any>({});
  accountInfoCurrent = this.accountInfoSource.asObservable();

  constructor() { }

  accountInfoChange(accountName: any) {
    this.accountInfoSource.next(accountName)
  }

}

newform.component.ts

import { Component, OnInit } from '@angular/core';
import { Locationslist } from '../services/locationslist.service';
import { AuthService } from '../services/auth.service';


@Component({
  selector: 'app-new-charge',
  templateUrl: './new-charge.component.html',
  styleUrls: ['./new-charge.component.css']
})
export class NewChargeComponent implements OnInit {

  accountName: string;
  locations;

  constructor(protected authService: AuthService, private locations: Locationslist) { }

  ngOnInit() {
    this.getLocations();
  }

  getLocations() {
    this.authService.accountInfoCurrent.subscribe(accountInfo => {
      this.accountName = accountInfo.AccountName;
    } );


    this.locations.getUserLocations(this.accountName)  // <===  this.accountName is undefined
      .subscribe(foundset => {
        this.locations = foundset;
       });

  }


}

locationslist.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class Valuelists {

  constructor(private http: HttpClient, protected authService: AuthService) { }

  getUserLocations(accountname) {
    let token = localStorage.getItem('token');
    let body = '{\"query\": [ { \"AccountName\" : \"=' + accountname + '\"} ] }';
    const findLocations = 'https://my.api';
    let auth = 'Bearer ' + token;

    return this.http.post(findLocations, body, {
      headers: new HttpHeaders()
        .set('Content-Type', 'application/json')
        .set('Access-Control-Allow-Origin', '*')
        .set('Authorization', auth)
    })
  }
}

我知道如果将“帐户名”硬编码到getUserLocations（accountname）的参数中，locationslist服务将起作用。实际上，locationservice最终可以与BehaviorSubject值一起使用，但是在控制台中，我首先看到http响应为500的错误，然后最终获得了位置信息。再次，这似乎是BehaviorSubject变量显示较晚。有没有办法将BehaviorSubject值作为参数传递给方法，还是有更好的方法实现我的目标？

Answer 1

当然，您只需要函数本身中的反应性方法即可。

name$: BehaviorSubject<string> = new BehaviorSubject("");

function doSomething() {
  this.name$.subscribe(console.log); // Here you have that name
  // You can filter it like (.pipe(filter(name => !!name)) is you don't want undefined value
}

// Your location function would look like this:
function getLocations() {
  this.name$.pipe(switchMap(name => {  // Every time name subject changes, switch to another getUserLocations
    return this.locations.getUserLocations(name)
  }))
  .subscribe(foundset => {
    this.locations = foundset;
   });
}

也删除上述getLocations函数中未定义的值。

Answer 2

在这种情况下，您应该查看Resolve Guard。这样做的目的是在组件加载之前预取一些数据。从您的问题来看，您似乎首先需要在组件中使用用户名，然后再执行其余功能。

创建解决方案防护的基本步骤是

创建一个获取用户名的服务
创建一个实现resolve方法的解析保护，以通过调用您的服务返回可观的内容
在该组件的路由配置中添加您的解决方案防护的引用
在您的组件中，订阅组件数据参数并获取用户名

请注意，路由配置中的组件可以具有多个解析防护。

https://www.concretepage.com/angular-2/angular-resolve-guard-example

提供了一个很好的例子

Answer 3

您需要连接这两种方法，并使第二种方法等待第一种方法完成。

您可以使用map运算符执行此操作，只需将第二个函数放在map函数中即可。

 getLocations() {
    this.authService.accountInfoCurrent.pipe(map(() => {
                this.locations.getUserLocations(this.accountName)  
                      .subscribe(foundset => {
                        this.locations = foundset;
                      });
    })).subscribe(accountInfo => {
      this.accountName = accountInfo.AccountName;
    } );
}

Answer 4

感谢大家的投入和帮助。我最终使用路由参数将数据从一个组件发送到下一个组件。它更直接，也更可能是将“参数”传递给另一个组件的“正确”方法（因此命名为route params！）。它也不是异步的，因此您不必“等待”到BehaviorSubject可观察到。可以直接在OnInIt上加载它。

希望有帮助！

如何使用BehaviorSubject值作为方法的参数？

auth.service.ts

newform.component.ts

locationslist.service.ts

4 个答案: