根据 Angular 中的场景执行 Typescript 函数

Posted 2023-03-13

【中文标题】根据 Angular 中的场景执行 Typescript 函数

【英文标题】：Execute a Typescript function according to a scenario in Angular

【发布时间】：2019-08-09 00:49:56

【问题描述】：

在我的应用程序中，我在一个组件中有两个组合框。 它们的默认值都是null。

选择时间段或用户时，会将值发送到商店。 这允许您在不同的组件中使用句点和选定的用户。

Combobox.component 存储：

  onSelectedWalletsPeriod(period: Period) 
    this.store.setSelectedWalletsPeriod(period);
  

  onSelectedWalletsUser(user: User) 
    this.store.setSelectedWalletsUser(user);
  

商店：

export class MystoreComponentStore 

    private selectedWalletsPeriodSubject = new BehaviorSubject<Period>(null);
    private selectedWalletsUserSubject = new BehaviorSubject<User>(null);

    public selectedWalletsPeriod$ = this.selectedWalletsPeriodSubject.asObservable();
    public selectedWalletsUser$ = this.selectedWalletsUserSubject.asObservable();

    constructor() 

    setSelectedWalletsPeriod(period: Period) 
        this.selectedWalletsPeriodSubject.next(period);
        this.selectedWalletSubject.next(null);

        /# DEBUG #/
        console.log('selectedPeriod:', period);
    

    setSelectedWalletsUser(user: User) 
        this.selectedWalletsUserSubject.next(user);
        this.selectedWalletSubject.next(null);

        /# DEBUG #/
        console.log('selectedUser:', user);
    

存储到 Result.component：

export class ResultComponent implements AfterViewInit 

  selectedWalletsPeriod: Period = null;
  selectedWalletsUser: User = null;

  constructor(public store: MystoreComponentStore)  

  ngAfterViewInit() 
    this.store.selectedWalletsPeriod$.subscribe(period=> this.selectedWalletsPeriod = period);

    this.store.selectedWalletsUser$.subscribe(user=> this.selectedWalletsUser = user);
  

要显示第二个组件的列表，我必须选择一个时期和一个用户。 在此之前，一切都会完美运行。

但我想做的是在选择用户和期间时执行一个函数。 当更改两个组合框之一的值时，也会执行此函数。

此功能将允许我根据期间和用户从我的数据库中检索钱包列表。

我不知道该怎么做。如果你有想法，我很感兴趣。

这是一个小例子：Stackblitz HERE

提前谢谢你。

【参考方案1】：

您可以使用combineLatest 侦听任一选择的最新值，然后过滤未设置两个值的那些值：

combineLatest(this.store.selectedWalletsPeriod$, this.store.selectedWalletsUser$)
    .pipe(filter(([period, user]) => period && user))
    .subscribe(([period, user]) => console.log('period=' + period + ',user=' + user));

上面的示例应该在设置两个值后立即记录一个值。

另请参阅：documentation for combineLatest

【讨论】：

非常感谢您的回答，这正是我所需要的。我修改了我的Stackblitz 解决方案，直接在我的商店中添加了这个功能。

【参考方案2】：

你可以压缩你的 observables：

https://www.learnrxjs.io/operators/combination/zip.html

如果两个 observable 都有一个值并且每次其中一个发生变化，这将调用订阅。但是您需要通过“not null”或类似的方式过滤您的 observables，因为您使用 null 初始化您的行为主题。

顺便说一句：您是否尝试过 redux 或 ngrx（redux for angular）？您不需要实现自己的商店/动作处理/副作用/订阅逻辑。

【讨论】：

正如 yankee 所说：combineLatest 作为 zip 可以做得更好。