根据 Angular 中的场景执行 Typescript 函数
Execute a Typescript function according to a scenario in Angular
在我的应用程序中,我在一个组件中有两个组合框。
它们的默认值都是null
.
当 selecting 一个时期或一个用户时,值被发送到商店。
这允许您在不同的组件中使用句点和 selected 用户。
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);
}
}
要显示第二个组件的列表,我必须 select 一个句点和一个用户。
在那之前一切正常。
但我想做的是在 selected 用户和句点时执行一个函数。
当更改两个组合框之一的值时,此函数也会执行。
此功能将允许我根据时间段和用户从我的数据库中检索钱包列表。
我不知道该怎么做。如果你有想法,我很感兴趣。
这是一个小例子:Stackblitz HERE
提前致谢。
您可以使用 combineLatest
来侦听任一 select 的最新值,然后过滤那些未设置两个值的值:
combineLatest(this.store.selectedWalletsPeriod$, this.store.selectedWalletsUser$)
.pipe(filter(([period, user]) => period && user))
.subscribe(([period, user]) => console.log('period=' + period + ',user=' + user));
以上示例应在设置两个值后立即记录一个值。
您可以压缩您的 observables:
https://www.learnrxjs.io/operators/combination/zip.html
如果两个 observable 都有一个值并且每次其中一个发生变化,这将调用订阅。但是你需要通过 "not null" 或类似的东西来过滤你的可观察对象,因为你用 null.
初始化你的行为主体
顺便说一句:您是否尝试过 redux 或 ngrx(angular 的 redux)?您不需要实现自己的存储/操作处理/副作用/订阅逻辑。
在我的应用程序中,我在一个组件中有两个组合框。
它们的默认值都是null
.
当 selecting 一个时期或一个用户时,值被发送到商店。 这允许您在不同的组件中使用句点和 selected 用户。
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);
}
}
要显示第二个组件的列表,我必须 select 一个句点和一个用户。 在那之前一切正常。
但我想做的是在 selected 用户和句点时执行一个函数。 当更改两个组合框之一的值时,此函数也会执行。
此功能将允许我根据时间段和用户从我的数据库中检索钱包列表。
我不知道该怎么做。如果你有想法,我很感兴趣。
这是一个小例子:Stackblitz HERE
提前致谢。
您可以使用 combineLatest
来侦听任一 select 的最新值,然后过滤那些未设置两个值的值:
combineLatest(this.store.selectedWalletsPeriod$, this.store.selectedWalletsUser$)
.pipe(filter(([period, user]) => period && user))
.subscribe(([period, user]) => console.log('period=' + period + ',user=' + user));
以上示例应在设置两个值后立即记录一个值。
您可以压缩您的 observables:
https://www.learnrxjs.io/operators/combination/zip.html
如果两个 observable 都有一个值并且每次其中一个发生变化,这将调用订阅。但是你需要通过 "not null" 或类似的东西来过滤你的可观察对象,因为你用 null.
初始化你的行为主体顺便说一句:您是否尝试过 redux 或 ngrx(angular 的 redux)?您不需要实现自己的存储/操作处理/副作用/订阅逻辑。