#angular #ngxs
Вопрос:
Согласно документации 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 the pandas memoized selector to only return pandas
@Select(ZooState.pandas) pandas$: Observable<string[]>;
// Also accepts a function like our select method
@Select(state => state.zoo.animals) animals$: Observable<string[]>;
// Reads the name of the state from the parameter
@Select() zoo$: Observable<ZooStateModel>;
}
Мой вопрос конкретно касается этого третьего @Select
. Как именно декоратор и/или фреймворк знают, какое состояние следует использовать в лямбде? Здесь нет ничего очевидного, чтобы сказать: «этот компонент использует ZooState в качестве объекта состояния», так как же определить правильный срез состояния для просмотра?
Для протокола, этот шаблон, похоже, работает просто отлично — я просто немного озадачен тем, КАК это сделать.
Ответ №1:
При использовании @Select
декоратора NGXS с функцией, ссылающейся на целевое состояние, state
arg в этом случае представляет весь объект состояния, содержащий все состояния регистрации по их именам, которые указаны в @State
декораторе (например: @State<ZooStateModel>({ name: 'zoo' })
)
Например, если у вас есть 3 состояния, определенные как: zoo
, app
, и foo
, и зарегистрированные в магазине, то тип state
arg будет выглядеть следующим образом:
@Select((state: { zoo: ZooStateModel; app: AppStateModel; foo: FooStateModel }) => state.zoo.animals)
animals$: Observable<string[]>;
Комментарии:
1. Ах, да, конечно. Меня немного сбил с толку мой собственный опыт — на самом деле мне не нужно было указывать полный путь к состоянию с именем состояния, но этот конкретный компонент также имеет доступ только к одному объекту состояния, поэтому я предполагаю, что в этом нет необходимости, если в вашем модуле доступен только один объект состояния.
2. Не могли бы вы, пожалуйста, уточнить, что именно вы пытаетесь сказать или спросить!? 🙂
3. Извините, если это было неясно… Я хотел сказать, что у меня есть компонент, который просто делает
@Select(state => state.property)
, а не@Select(state => state.stateSlice.property)
. Я предполагаю, что причина, по которой это работает, заключается в том, что компонент, содержащий@Select
только один объект состояния, имеет доступ к этому объектуNgxsModule.forFeature(MyState)
состояния через файл .module.ts.