Ngxs @Select装饰器可以返回BehaviorSubject而不是Observable吗？
Ngxs是一个用于状态管理的JavaScript库，它可以帮助开发人员管理应用程序的状态和数据流。@Select装饰器是Ngxs提供的一种装饰器，用于从状态中选择特定的数据。
@Select装饰器本身只能返回Observable对象，而不是BehaviorSubject。Observable是一种数据类型，它可以用于处理异步数据流，并提供丰富的操作符来处理数据。BehaviorSubject是Observable的一种特殊形式，它可以记住最新的值，并且在订阅后立即向订阅者发送最新的值。
虽然@Select装饰器不能直接返回BehaviorSubject，但是可以通过一些方法实现类似的效果。例如，可以在状态类中使用BehaviorSubject来存储数据，并在@Select装饰器中返回这个BehaviorSubject的asObservable()方法。
下面是一个示例：
import { State, Selector } from '@ngxs/store';
import { BehaviorSubject } from 'rxjs';
@State({
name: 'counter',
defaults: {
count: 0
}
})
export class CounterState {
private countSubject = new BehaviorSubject<number>(0);
private count$ = this.countSubject.asObservable();
@Selector()
static getCount(state: CounterStateModel) {
return state.count$;
}
// 其他操作方法...
}在上面的示例中，我们创建了一个名为counter的状态，并在CounterState类中声明了一个私有的countSubject BehaviorSubjec对象和一个公共的count$ Observable对象。在@Selector装饰器中，我们返回了count$对象，这样就可以在组件中订阅并获取最新的值。
尽管返回的是Observable对象，但由于使用了BehaviorSubject，它将始终发送最新的值给订阅者。
推荐的腾讯云相关产品：
- 云函数SCF（Serverless Cloud Function）：https://cloud.tencent.com/product/scf
- 轻量应用服务器Lighthouse：https://cloud.tencent.com/product/lighthouse
相关·内容
我有一个NGXS的角度项目，我刚刚设置。
在我的AuthState中，我有以下内容：
@Injectable()
export class AuthState {
@Selector()
static isAuthenticated(state: AuthStateModel) {
return state.currentUser !== null;
}
//...
}
在组件中，我执行以下操作：
export class HeaderComponent implements OnInit {
@Select(AuthState.isAuthenticated) i
浏览 6提问于2022-03-17得票数 1
回答已采纳
乍一看，角组件生命周期逻辑的一种默认行为似乎是，由于组件属性尚未初始化，所以在组件初始化完成之前，流$不能有赋值：
@Component({
selector: 'app-component',
template: `<p>app works!</p>`,
})
export class AppComponent implements OnInit {
@Select(AppState.getItems)
stream$: Observable<string[]>;
firstItemStream$: Observabl
浏览 2提问于2020-12-16得票数 2
回答已采纳
1回答
根据NGXS文档，以下是所有有效代码：
import { Select } from '@ngxs/store';
import { ZooState, ZooStateModel } from './zoo.state';
@Component({ ... })
export class ZooComponent {
// Reads the name of the state from the state class
@Select(ZooState) animals$: Observable<string[]>;
// Uses
浏览 4提问于2021-10-05得票数 0
回答已采纳
3回答
在使用NGXS @Select装饰器时，访问状态模型上定义的属性的正确方式是什么。
例如，定义了以下状态：
export interface UserStateModel {
firstname: string;
lastname: string;
}
@State<UserStateModel>({
name: 'user',
defaults: {}
})
export class UserState {..}
在组件中，如果我想像这样选择用户状态：
..export class MyComponent {
@Select(UserState
浏览 3提问于2018-05-01得票数 4
回答已采纳
4回答
更新
从@NGXS v3.1开始，他们最终在@Selector()中引入了参数。
DOCS的例子
首先，定义@Selector“”
@State<string[]>({
name: 'animals',
defaults: []
})
@Injectable()
export class ZooState {
@Selector()
static pandas(state: string[]) {
return (type: string) => {
return state.filter(s => s.index
浏览 0提问于2018-05-03得票数 4
回答已采纳
我对角很陌生。我正在使用NGXS的角度6进行状态管理。
我的NGXS存储有一个user减速器，它的接口是
/* src/app/store/models/user.model.ts */
export interface User {
serverToken? : string;
// and other unrelated stuff
}
我想在serverToken中使用Authorization头中的HttpInterceptor。
这是我现在的HttpInterceptor代码
import {Store, Select} from '@ngxs/store&#
浏览 0提问于2018-07-17得票数 4
回答已采纳
我正在尝试创建一个NgXs ，但是当选择器被使用时，我会得到运行时的错误：
TypeError: Cannot read property 'x' of undefined
at my-state.state.ts:56
at wrappedSelectorFn (ngxs-store.js:2136)
at memoized (ngxs-store-internals.js:58)
at memoized (ngxs-store-internals.js:58)
at Store.selectSnapshot (ngxs-store.j
浏览 3提问于2019-11-15得票数 1
回答已采纳
该项目正在运行，没有出现错误。但是所有的测试都失败了，因为"SelectFactory没有连接到商店！“。在我们将可观察对象分解到基类之前，它就已经起作用了。 我可以将基类存根吗？Stub @Select？毁掉店铺？使用@Select旁边的内容吗？ 我需要它继续监听商店的观察点。并且它需要扩展基类。其他一切都悬而未决。 包： "@angular/core": "7.2.11",
"@ngxs/store": "^3.4.3" 组件 @Component({
selector: "app-billing-l
浏览 3提问于2019-09-07得票数 3
3回答
我正在尝试在我的angular应用程序中创建一个基本的商店，并遵循教程，但当我在Redux DevTools中查看商店时，商店结构是商店>空>用户，而不是商店>用户。 这可能是Redux工具和NGXS的问题，但当我尝试使用选择器获取信息时，也不会返回任何信息 这是我的州代码(user.state.ts)： @State<UserStateModel>({
name: 'user',
defaults: {
user: null
}
})
export class Updat
浏览 8提问于2019-04-14得票数 1
1回答
在这样的组件中有多个@Selects：
@Select(ItemState.getMode) mode: Observable<Item>;
@Select(QuestionState.SingleQuestion) question: Observable<Question>;
@Select(ItemState.getItemNames) itemNames: Observable<any>;
@Select(ItemState.getItemStepDetails) itemStepDetails: Observable<any>;
现在，
浏览 2提问于2019-07-24得票数 3
回答已采纳
更新: Ok。我们发现了如何复制，见最小复制 描述 在生产和非生产环境中，我们可以在服务器日志中看到以下两个致命错误中的许多： 致命 main.js:xx NgxsSelectSnapshotModuleIsNotImported 错误 ：您忘记导入"NgxsSelectSnapshotModule“了！在getStore的assertDefined (/opt/app/dist/server/main.js:xx:yy) 致命 main.js:xx 错误:您忘记导入NGXS模块！在createSelectObservable (/opt/app/dist/server/main.j
浏览 77提问于2021-02-28得票数 0
回答已采纳
在学习NativeScript教程时，我决定第一次尝试NGXS数据存储。我尝试过5种不同的NGXS编写教程(从NS文档开始)，但是尽管Android或NS没有抛出错误，但无法获得状态更新。
NGXS3.5角8.0 NativeScript 5.4
尝试的最终状态=>
// app.module.ts
import { NgxsModule } from '@ngxs/store';
import { ChallengeState } from './shared/challenge.state';
...
imports: [
...
浏览 0提问于2019-07-24得票数 1
回答已采纳
1回答
我在Angular中使用ngxs，现在当我试图从存储中获取更改时，我在状态中定义了一个选择器
@Selector()
static getData(state : DataStateModel){
return state.data;
}
在组件中，我使用@Select修饰器来获取一个可观察对象
@Select(DataState.getData) data$;
我遇到的问题是，如果我必须访问组件中的数据，我将订阅数据$ observable并将数据保存到组件中的一个新变量中。
ngOnInit() {
this.datasubscription = this.data$.su
浏览 7提问于2020-03-05得票数 1
回答已采纳
我在使用ngxs的国家管理。我是否需要从选择器中取消订阅，还是由ngxs处理？
@Select(list)list$!: Observable<any>;
this.list$.subscribe((data) => console.log(data));
浏览 0提问于2019-06-11得票数 13
回答已采纳
getWatchlist(query: string): BehaviorSubject<IWatchlist> {
this.search(query)
.subscribe((searchResults: Observable<ISearchResults>) => {
const watchlist = formatSearchResults(searchResults);
this.watchlist$.next(watchlist);
});
return this.watchl
浏览 0提问于2018-04-29得票数 0
我尝试将数据从一个组件发送到另一个组件，但它总是给我未定义的数据！
这是我的services.ts：
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor() { }
private subjectDossierNumber = new Subject<a
浏览 2提问于2021-02-08得票数 0
回答已采纳
目前，我的代码中有几个@Select标记，我希望将它们的状态保存在组件的本地。它们看起来像这样： @Select(myState.editing)
editing$: Observable<boolean>;
editing: boolean;
this.editing$.subscribe((e: boolean) => {
this.editing = e;
}); 似乎应该有一种方法让@Select返回一个BehaviorSubject，这样我就可以这样做： @Select(myState.editing)
editing$: BehaviorSubject&l
浏览 15提问于2020-10-30得票数 0
2回答
我有这样的主题服务；
private subject = new Subject<any>();
sendMessage(message: any) {
this.subject.next(message);
}
clearMessage() {
this.subject.next();
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
并从父组件中输入消息。
注意:我的父-子组件通过router-outlet 连接。
private getMer
浏览 0提问于2017-03-24得票数 0
我正在学习NGXS，我有一个懒惰的选择器，如下所示 @Selector()
static getStudent(state: StudentModel) {
return (std_id: string) => {
return state.students[std_id];
}
} 在组件中，我尝试获取选择器快照 let _student = this.store.selectSnapshot(StudentState.getStudent);
console.log('_student : ', JSON.stringify(_st
浏览 16提问于2021-03-18得票数 1
是否可以使用NGXS存储来使用路由解析器？
我有一个这样的测试，但我不知道这是不是正确的方法：
import {ActivatedRouteSnapshot, Resolve} from "@angular/router";
import {Todo} from "./todos.models";
import {Observable} from "rxjs/Observable";
import {Select, Store} from "@ngxs/store";
import {GetTodo, TodosState} fr
浏览 0提问于2018-11-09得票数 5
我在角度上是新的，我试图实时传输两个兄弟姐妹之间的数据：
这是我的服务：
message-transfer-service.ts
import { Injectable } from '@angular/core';
import { Products } from './products';
import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/of";
@Injectable({
providedIn: 'root
浏览 4提问于2019-09-18得票数 2
回答已采纳
在我的NGXS存储中，我有以下异步选择器
@Selector()
static async mainState(store: IMyStore): Promise<IMyState> {
return this.getActiveState(store);
}
如果我现在订阅这个选择器
@Select(MyStore.mainState) state$: Observable<IMyState>;
如果我订阅了这个流，就会收到承诺，而不是IMyState对象。所以我必须做：
this.state$.subscribe(p => {
p.then(s
浏览 1提问于2021-09-03得票数 1
回答已采纳
我有一个使用@ngxs/store node.js包v3.6.2的角10项目，我试图在服务类中进行状态订阅，立即在服务中处理结果，然后将结果传递给组件。
我的服务类目前无法工作：
import { Injectable } from '@angular/core';
import { Store } from '@ngxs/store';
import { Models } from './models/document.model';
import { Observable } from 'rxjs';
import { asy
浏览 1提问于2020-07-25得票数 0
回答已采纳
我正在使用ngxs进行角度状态处理，并且我试图测试我们的组件作为单元，所以最好只使用模拟存储、状态等。
我们的组件中包含的内容如下：
export class SelectPlatformComponent {
@Select(PlatformListState) platformList$: Observable<PlatformListStateModel>;
constructor(private store: Store, private fb: FormBuilder) {
this.createForm();
this.selectPlatf
浏览 3提问于2018-06-28得票数 9
回答已采纳
这似乎是一个相当常见的模式，所以我希望有人能帮忙。
我试图通过一个角度服务来揭露一个可以观察到的“事物”。我的服务需要首先获取内容列表，然后侦听添加的新内容。所以我有两个不同的服务请求，但是我试图将它们封装在一个可以观察到的东西中，这样消费组件就不必担心内部的问题了。
它看起来是这样的：
export class MyService {
constructor(private commService: CommService){}
get things(): Observable<Things[]> {
// how can I get the initial
浏览 0提问于2018-09-11得票数 0
我已经宣布：
Subject<String> mBehaviorSubject = BehaviorSubject.createDefault("default").toSerialized();
好像挺好的。但我现在想添加.observeOn(AndroidSchedulers.mainThread()。这被拒绝了，因为Android希望看到一个Subject，并且正在查找一个Observable。但是根据文档，Subject从Observable类继承了observeOn()方法。我该怎么做呢？
假设我能做到这一点，操作符observeOn()和toSerial
浏览 1提问于2018-10-01得票数 1
回答已采纳
1回答
我有一个Firestore DB，它的集合排列方式类似于关系数据库，因为相关的集合存储外键。做出这一决定是为了使其更容易与现有的.Net服务集成，并允许更大的灵活性。
以下是数据模型的一部分：
我已经将我的状态分成了功能模块，并编写了如下代码：
ngxsOnInit(ctx: StateContext<SchedulesStateModel>) {
ctx.dispatch([
new GetScheduleGroups(),
new GetSchedules()
]);
}
@Selector()
static
浏览 0提问于2018-10-17得票数 2
我有一个小的共享角度服务，它看起来如下：
import {Injectable} from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs/Rx';
@Injectable()
export class SidebarService {
private _isOpen: BehaviorSubject<boolean> = new BehaviorSubject(false);
constructor() {
this._isOpen
浏览 5提问于2017-04-10得票数 3
1回答
我是NGXS的新手，我试图找出在使用NGXS成功/错误HTTP响应后发送UI toast通知的正确方式？我们是否应该在状态下处理它： @Action(SomeRequestSuccess)
public success(ctx: StateContext<SomeModel>, action: SomeRequestSuccess) {
// like this
this.store.dispatch([new SuccessToastNotification(msg)])
// or just use service
this.toast
浏览 18提问于2020-10-21得票数 2
回答已采纳
service.ts
@Injectable({
providedIn:'root'
})
export class textAppService{
constructor(private http: HttpClient){}
getPersonDetail(id:any):Observable<any>{
return id? this.http.post(ur;, {id:id}):of(new personDetails());
}
}
·因此，我希望将从getPersonDetail()方法获得的数据传递给其他一些非关系组件ts
浏览 16提问于2019-11-14得票数 1
回答已采纳
3回答
我想使用NGXS打开模式，这将为datatable设置列的可见性。
这是我的代码：
state.ts文件：
@Action(OpenColumnModal)
openColumnModal(ctx: StateContext<FeedStateModel>) {
const state = ctx.getState();
const allCols = state.allColumns;
return this.modalService.openColumnVisibilityModal(allCols).pipe(tap((result) => {
浏览 1提问于2019-07-01得票数 2
回答已采纳
2回答
我使用的是rendering 7，其中有一个组件，它根据来自@Input的数据呈现一系列div，并且应该由于服务响应而进行更新，但是组件没有正确更新，加载程序一直在加载(loading=true)，直到我单击文本输入，然后单击其他地方。
模板：
<div class="row" *ngFor="let message of messages">
<div>{{message.date}}</div>
<div>{{message.body}}</div>
</div>
<div
浏览 9提问于2022-09-06得票数 0
2回答
下面是代码：
async ngOnInit() {
@Select(UserPageState.get('collection')) users$: BehaviorSubject<Array<Partial<User>>>;
const USER = this.creds.credentials['id'];
this.users$.subscribe(param => this.users$.next(param.filter(x => x.id !== USER)));
浏览 1提问于2020-03-16得票数 0
我使用BehaviorSubject开发了一个定制的angular商店，我的用法如下： export class UserFaceComponent {
@Input()
public id: any;
public presence$: Observable<boolean>;
constructor(private _store: Store) { }
public ngOnInit() {
this.presence$ = this._store
.select(s => s.us
浏览 8提问于2020-10-10得票数 3
回答已采纳
我有一个滑块组件，它会在您拖动滑块时发出数字，它的使用方法如下：<my-slider (change)="onSlide($event)"></my-slider>。我想摆脱onSlide方法，转而将change事件流绑定到Observable<number>属性(而不是回调)。
我正在为我的@Output使用Angular 2 EventEmitter。EventEmitter继承自RxJs Subject，RxJs是一个Observable和一个Observer。我希望重用EventEmitter的Observable端。
当然，我可以将
浏览 4提问于2016-01-01得票数 18
1回答
我将Angular与容器/表示模式和Ngxs一起使用。我的问题如下： 我有一个容器组件嵌套在其他容器组件中，这两个组件调用相同的@Select @Select(State.exaple) example$: Observable<boolean>; 我不能将example$作为输入传递，也不能重新设计应用程序。 我的问题是:我应该使用@Select两次还是使用共享服务？ 如果性能相同或影响最小，我会更喜欢使用double @Select，但我想知道这种方法是否有任何问题或性能不佳。
浏览 9提问于2021-05-11得票数 0
回答已采纳
我之所以走这个方向，是因为我有另一个守卫，他正在验证先前存储的令牌上的用户。这就是我在以前的rxjs版本中所做的，现在在最新的版本中，你不能映射这个主题。
canActivate(next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.authservice.behaviorsubject().map(x => {
if (x) {
浏览 0提问于2018-05-17得票数 0
我想在一个固定的时间间隔内重新发出可观察到的最后一个值，我尝试了。
obs.pipe(repeat({delay:1000})).subscribe(x => console.log('Emitted', x));
但这不起作用。在研究过这个之后，我的可观察到的实际上是一个BehaviorSubject。
所以我的问题是为什么第一颗卫星每秒钟发射一次
of('Observable').pipe(repeat({ delay: 1000 })).subscribe(x => console.log(x));
但不是这个？
var bs = new Be
浏览 12提问于2022-12-02得票数 0
在我的TS文件中，我有一个声明，如
import { Select } from '@ngxs/store';
@Injectable()
export class someService {
@Select(someSELECTOR) varName$!: Observable<someType[]>;
elements$ = this.varName$.pipe(
map(elements => elements.map(SOMElogic),
);
}
我的问题是"varName$!"，我知道我们使用$来表示可观察的，任
浏览 2提问于2022-01-11得票数 0
回答已采纳
auth.service.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
im
浏览 6提问于2017-11-24得票数 1
回答已采纳
该请求在服务器成功响应后每n秒钟重复一次。但是在查询时间中有一个字段，它改变了查询本身。RepeatWhen -不适合于这个原因。告诉我，我该怎么解决这个问题？(谢谢)
AtomicBoolean onComplete = new AtomicBoolean(true);
Observable.interval(3, TimeUnit.SECONDS)
.compose(rxSchedulersAbs.getIOToMainTransformer())
.map(new Func1<Long, Obser
浏览 6提问于2017-03-05得票数 1
1回答
我试图建立我的第一个网站，我需要一些相当简单的东西，桌子与CRUD操作。总的来说，我是一个角度和JS的初学者，但是在看了很少的教程之后，我成功地解决了一些问题。现在，我在尝试用JSON数据填充material时陷入了困境。如果我手动设置数据，它可以工作(下面的代码)，但我不知道如何使用JSON。由于我需要过滤器、排序和分页作为模板，所以我使用了“富表”示例和中的一些代码
我不认为您需要html部分，但如果您需要，我可以更新：
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
impor
浏览 2提问于2017-10-17得票数 1
回答已采纳
使用下面的ngxs，
user.state.ts
export class UserState { ... }
product.state.ts
export class ProductState { ... }
App.component.ts
import {UserState} from './user.state'
import {ProductState} from './product.state'
export class App{
/***
I am not sure but like ngrx we can
浏览 1提问于2018-08-09得票数 1
回答已采纳
1回答
我尝试使用Firebase创建基于角色的用户访问控制，以便在用户通过身份验证的情况下允许访问路由。我正在尝试这个教程：https://angularfirebase.com/lessons/role-based-permissions-and-authorization-with-firebase-auth/但我使用angular 7，我得到一个语法错误“Observable.of(null)”和".subscribe(user => { this.user.next(user)“ my My AuthService： import { Injectable } from &#
浏览 38提问于2019-01-10得票数 2
2回答
我正在升级到rxjava2，我们有代码来轮询来自服务器的数据，当出现网络问题时，代码句柄可以延迟重试。但是，当我试图迁移到rxjava2时，代码就停止工作了。下面是Rxjava1的代码，的工作非常完美的，基本上遵循这个和这个
.retryWhen(new Func1<Observable<? extends Throwable>, Observable<?>>() {
@Override
public Observable<?> call(final Observable<?
浏览 3提问于2017-08-27得票数 0
回答已采纳
如何将BehaviourSubject的默认值作为Observable提供
因此，不是：
// observer will receive the "default", "zero", "one"
BehaviorSubject<Object> subject = BehaviorSubject.create("default");
subject.subscribe(observer);
subject.onNext("zero");
subject.onNext("one");
/
浏览 0提问于2015-06-08得票数 1
我有一个可以观察到AngularFirestore.collection的服务。
...
export class AppFirestoreService {
public rootCategories$: Observable<Category[]>;
constructor(private afs: AngularFirestore) {
this.rootCategories$ = this.afs.collection<Category>(`categories`).snapshotChanges()
.pip(
...
浏览 0提问于2020-03-27得票数 0
回答已采纳
我有点不好意思把这个贴出来，但我需要一只橡皮鸭。由于某种原因--将带有HTTPClient的构造函数添加到该类中会导致错误"main.ts:12错误:无法解析LanguageState：(？)的所有参数“。但我不知道为什么
import { State, Action, Selector, StateContext } from "@ngxs/store";
import { ChangeLanguage } from "./language.actions";
import { Languages } from "src/app/globals
浏览 2提问于2020-06-08得票数 0
回答已采纳
2回答
这是我的代码
//服务方法
private cartObs$: BehaviorSubject<CartItem[]> = new BehaviorSubject(null);
getCartItems(): Observable<CartItem[]> {
return this.cartObs$.asObservable();
}
组件//方法
sum$: Observable<number>;
this.sum$ = this.cartService
.getCartItems()
浏览 1提问于2021-04-22得票数 0
回答已采纳
1回答
我有一个Range2服务，它执行几个步骤来验证和登录一个应用程序用户。每当我试图在我的观察者上调用next()时，我都会得到一个错误，它是未定义的。在它上成功调用next()的唯一地方是当可观察的实例化时在结构器中。
如果调用authenticateUser()，就会得到一个this.isLoggedIn未定义的错误。
AuthService.ts
public isLoggedIn$: Observable<boolean>;
private isLoggedIn: Observer<boolean>;
constructor(...) {
this.is
浏览 0提问于2016-08-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
