RxJS take() 运算符

Question

我在理解 take() 运算符时遇到了一些问题。在它的定义中，它应该 return observable 发出的第一个值，但对我来说它似乎是 return 最后一个值。

我尝试了以下测试以更好地理解它：

UsersService.ts

import {User} from '../models/user.model';
import {BehaviorSubject} from 'rxjs';

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

  userObs = new BehaviorSubject<{test: string}>(null);

  testEmit(inp: string) {
    this.userObs.next({test: inp});
  }
}

和一个组件。

users.component.html

  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <input type="text" class="form-control" #inp>
      <button class="btn btn-primary" (click)="testTake(inp)">Emit</button>
    </div>
  </div>
</div>

users.component.ts

import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {User} from '../models/user.model';
import {UsersService} from '../services/users.service';
import {interval, Observable, Observer, Subscription} from 'rxjs';
import {take} from 'rxjs/operators';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit, OnDestroy {
  constructor(private usersService: UsersService) {
  }

  ngOnInit(): void {
    this.usersService.userObs.pipe(take(1)).subscribe((data: {test: string}) => {
      console.log(data.test);
    });
  }

  testTake(inp: HTMLInputElement) {
    this.usersService.testEmit(inp.value);
  }
}

在视图中，我在输入中输入了一些内容，然后单击按钮发出它，然后我转到另一个组件并返回到这个组件以重新触发 OnInit() 函数，我在控制台中得到的是我在输入中写的最后一个值。我是不是看错了？

感谢您的宝贵时间和帮助。

Answer 1

这很明显，因为 BehaviorSubject 具有存储“当前”值的特性。这意味着您始终可以直接从 BehaviorSubject.

中获取最后发出的值

并且您正在使用单例服务。因此，当您转到其他路线并返回时，它会发出最后存储的值。

This could help you to understand it further

如果这不是您想要的，我建议您使用 Subject 而不是 BehaviourSubject。

RxJS take() 运算符

RxJS take() operator

rxjs

typescript

angular

rxjs-pipeable-operators