角9-关于可观测性和map()的问题，它如何返回类的特定属性？

Question

我正在继续一个前同事的项目，我对一些代码有疑问，我不明白其中的某些部分。

为了给您提供一些上下文，我们有一个UserInfo类，它看起来如下：

export class UserInfo {
  constructor(
    public readonly userLoginId: string,
    public readonly hasLocalPassword: boolean,
    public readonly loginMethods: Array<LoginInfo>,
    public readonly loginMethodsAvailable: Array<LoginInfo>,
    public readonly isAuthenticated: boolean,
  ) {}
}

export class LoginInfo {
  constructor(
    public readonly loginID: number,
    public readonly displayName: string,
    public readonly logoUrl: string
  ) {
    if ([loginID, logoUrl, displayName].some(s => !s)) {
      throw Error("not all arguments passed for LoginInfo");
    }
  }
}

然后在一个Service class中，对于属性loginMethods和loginMethodsAvailable，我们有2 observables。

 private readonly _loginMethodSub = new BehaviorSubject(Array<LoginInfo>());
  private readonly _loginMethodAvailableSub = new BehaviorSubject(Array<LoginInfo>());

 public readonly loginMethod = this._loginMethodSub.asObservable().pipe(map(loginMethod => loginMethod || []));

 public readonly loginMethodAvailable = this._loginMethodAvailableSub.asObservable().pipe(map(loginMethod => loginMethod || []));

现在第一个疑问是，在这两个可观测值中，我们都是map() LoginInfo类，但是“如何”将类属性loginMethods或loginMethodsAvailable分配给正确的可观察性？我希望我的意思很清楚，从这段代码中，似乎两种可观察到的都是相同的，它们只是使用不同的behaviourSubject，但是代码如何知道一个用于类属性loginMethods，另一个用于loginMethodsAvailable？最初，我认为使用map()时，如果您使用Class属性的确切名称，它将过滤该可观测的属性并只输出该属性，但是map()中使用的名称在这两种情况下都是相同的，所以这并不重要。

最后，关键部分可能是这个Service类的构造函数：

constructor(private http: HttpClient) {
    this.User.pipe(map(uInfo => uInfo && uInfo.loginMethods)).subscribe(this._loginMethodSub);
    this.User.pipe(map(uInfo => uInfo && uInfo.loginMethodsAvailable)).subscribe(this._loginMethodAvailableSub);
  }

this.User只是主要可观察到的：

  private readonly _userSub = new BehaviorSubject<UserInfo>(null);
  public readonly User = this._userSub.asObservable();

那么构造函数中发生了什么呢？我从未见过这种语法，它订阅并传递给它一个BehaviorSubject。

同样，我主要怀疑的是，可观测的loginMethod和可观测的loginMethodAvailable如何发出正确的值？这段代码是在哪一部分中定义的？

代码正在工作，当我订阅loginMethod时，输出值是类UserInfo的属性loginMethods: <LoginInfo[]>，而当我订阅loginMethodAvailable时，我得到属性loginMethodsAvailable:<LoginInfo[]>的值，我只是不明白怎么回事。

我希望我说清楚了！

Answer 1

，那么构造函数中发生了什么呢？我从未见过这种语法，它订阅并传递给它一个BehaviorSubject？

当您有多个订阅者并期望每个订阅者都收到相同的值时，您必须使用BehaviorSubject。More on that here

--我主要怀疑的是，可观测的loginMethod和可观测的loginMethodAvailable是如何发出正确的值的？这段代码是在哪一部分中定义的？

视情况而定，它们发出不同的值。

使用代码示例查看示例片段。

​

const _loginMethodSub = new rxjs.BehaviorSubject();
const _loginMethodAvailableSub = new rxjs.BehaviorSubject();
const _userSub = new rxjs.BehaviorSubject(null);
const User = _userSub.asObservable();

const loginMethod = _loginMethodSub.asObservable().pipe(
  rxjs.operators.map(loginMethod => loginMethod || []));

loginMethod.subscribe(value => {
  console.log(value);
})

const loginMethodAvailable = _loginMethodAvailableSub.asObservable().pipe(
  rxjs.operators.map(loginMethod => loginMethod || []));

loginMethodAvailable.subscribe(value => {
  console.log(value);
})

console.log('User.pipe call ctor')

User.pipe(rxjs.operators.map(uInfo => uInfo && uInfo.loginMethods)).subscribe(_loginMethodSub);

User.pipe(rxjs.operators.map(uInfo => uInfo && uInfo.loginMethodsAvailable)).subscribe(_loginMethodAvailableSub);

console.log('api call')

_userSub.next({
  loginMethods: [{
    loginID: 1,
    displayName: 'test1',
    logoUrl: 'test1'
  }, {
    loginID: 2,
    displayName: 'test2',
    logoUrl: 'test2'
  }],
  loginMethodsAvailable: [{
    loginID: 1,
    displayName: 'test1',
    logoUrl: 'test1'
  }]
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js"></script>

​