我很可能错误地设置了我的秋田商店,但我非常密切地关注了文档。
我正在设置一些routerLink
s 以从商店动态填充(应用程序行为取决于用户导航时更新路线)
在返回应用程序状态的订阅中,我从中派生新路由,如果我将返回的对象分配给我的组件参数,我会感到害怕ExpressionChangedAfterItHasBeenCheckedError
奇怪的是,如果我改为在订阅中为该属性分配一个静态对象,我不会收到错误消息(但值是静态的,不是我需要的)
我能够使用它,.detectChanges()
但我的印象是 Akita 为我们处理更改检测,所以我非常困惑(并且不想每次我子到商店查询时都必须手动检测更改)
有效的代码(在导航栏中):
ngOnInit(): void {
this.getRouteParams();
this.appQuery.appState$.subscribe(next => {
this.app = next;
this.change.detectChanges();
//setting this.app = a static object instead of the prior 2 lines also works "fine"
});
设置状态的代码(在可导航组件之一中):
ngOnInit(): void {
this.route.params.subscribe(
(params: Params) => {
this.slug = params['slug'] ? params['slug'] : '';
this.appService.updateTab('activeRosterSlug',this.slug);
}
)
}
查询.ts:
import { Injectable } from '@angular/core';
import { Query } from "@datorama/akita";
import { AppState, AppStore } from './store'
@Injectable({providedIn: 'root'})
export class AppQuery extends Query<AppState> {
constructor(private appStore: AppStore){
super(appStore)
}
appState$ = this.select();
}
}
商店.ts:
import { Injectable } from '@angular/core';
import { Store, StoreConfig } from '@datorama/akita';
export type AppState = {
activeRosterSlug: string,
activeMatchSlug: string;
activeEventSlug: string;
activeManifestSlug: string;
maximixed: boolean;
footerExp: boolean;
}
export const getInitialState = () => {
return{
activeRosterSlug: '',
activeMatchSlug: '',
activeEventSlug: '',
activeManifestSlug: '',
maximixed: false,
footerExp: false
}
}
@Injectable({providedIn: 'root'})
@StoreConfig({name: 'appStore'})
export class AppStore extends Store<AppState> {
constructor(){
super(getInitialState())
}
}
服务.ts:
import { Injectable } from '@angular/core';
import { AppStore } from './store';
@Injectable({providedIn: 'root'})
export class AppService {
constructor(private appStore: AppStore) {}
updateTab(tabName: string, tabId) {
let update = {}
update[tabName] = tabId;
this.appStore.update(update);
}
}