问题描述
我的项目中有一个设置模块。
我的settign模块是延迟加载路由：
const routes: Routes = [
{
path: '',component: SettingComponent,children: [
{
path: '',loadChildren: () => import('./setting/account-option/account-setting.module')
.then(x => x.AccountSettingModule)
},{
path: 'finance',loadChildren: () => import('./setting/finance/finance-setting.module')
.then(x => x.FinanceSettingModule)
},{
path: 'account',{
path: 'request',loadChildren: () => import('./setting/request-setting/request-setting.module')
.then(x => x.RequestSettingModule)
}
]
},];
我希望在路由器中单击时从服务器获取数据并将其保存在ngrx中，以便下次用户com在此路由中不再从服务器获取并从ngrx获取数据。
现在我有问题：
我有3条路线：finance，request，account。当我第一次进入每条路线时，它都工作正常，但是当我想更改路线并转到设置模块中的另一条路线时，就会发生循环，向服务器发送请求。
例如，我第一次输入account，并且效果很好，当我想进入finance时，它就循环了。
财务：
在财务模块中定义：
StoreModule.forFeature('finance',FiananceReducer),EffectsModule.forFeature([FinanceEffect])
Finance Reducer：
export interface State extends fromroot.State {
finance: FinanceState;
}
export interface FinanceState {
currencyId: any;
}
const InitialFinance: FinanceState = {
currencyId: null
}
export const selectFinance = (state: FinanceState) => state;
export const selectFinanceSetting = createSelector(
selectFinance,(state: FinanceState) => state.currencyId
);
export function FiananceReducer(state = InitialFinance,action: FinanceActions): FinanceState {
switch (action.type) {
case FinanceActionTypes.SetFianance:
return {
...state,currencyId: action.payload
}
case FinanceActionTypes.GetFinance:
return {
...state,currencyId: action.payload
}
default: state;
}
}
财务操作
export enum FinanceActionTypes {
GetFinance = "[Finance] Get Fianance",SetFianance = "[Fianance] Set Fianance"
}
export class GetFianance implements Action {
readonly type = FinanceActionTypes.GetFinance;
constructor(public payload: number) { }
}
export class SetFianance implements Action {
readonly type = FinanceActionTypes.SetFianance;
constructor(public payload: number) { }
}
export type FinanceActions = GetFianance | SetFianance;
和Finance Effect :
@Injectable()
export class FinanceEffect {
constructor(private actions$: Actions,private financeSettingService: FinanceSettingService) { }
@Effect()
setFinance$: Observable<Action> = this.actions$.pipe(
ofType(FinanceActionTypes.GetFinance),map((action: financeActions.GetFianance) => action.payload),mergeMap((financeSetting: number) =>
this.financeSettingService.GetFinanceSetting()
.pipe(
map((data) => {
if (data.success) {
financeSetting = data.result['financeSettingsModel']['currencyId'];
return new financeActions.SetFianance(financeSetting);
}
}
)
)
))
}
并且我通过这种方式在组件中使用了那个
： ngOnInit(): void {
this.financeSettingFG = this.formBuilder.group({
currencyId: ['']
});
this.FetchData();
}
private FetchData() {
this.store.pipe(select('finance'))
.subscribe(data => {
if (data) {
this.PatchValue(data);
} else {
this.store.dispatch(new fromActions.GetFianance(null));
}
})
}
这是Setting Module :中的帐户设置代码
帐户配置：
StoreModule.forFeature('account',AccountReducer),EffectsModule.forFeature([AccountEffect]),帐户减少工具：
export interface State extends fromroot.State {
account: AccounteState;
}
export interface AccounteState {
email: boolean;
sms: boolean;
twoFactorAuthentication: boolean;
}
const InitialAccounte: AccounteState = {
email: false,sms: false,twoFactorAuthentication: false
}
export const selectAccounte = createFeatureSelector<State,AccounteState>(null);
export const selectAccounteSetting = createSelector(
selectAccounte,(state: AccounteState) => {
console.log("state",state)
return state
}
);
export function AccountReducer(state = InitialAccounte,action: AccountActions): AccounteState {
switch (action.type) {
case AccountActionTypes.SetAccount:
return {
...state,email: action.payload.email,sms: action.payload.sms,twoFactorAuthentication: action.payload.twoFactorAuthentication
}
case AccountActionTypes.GetAccount:
return {
...state,}
default: state;
}
}
帐户操作：
export enum AccountActionTypes {
GetAccount = "[Account] Get Account",SetAccount = "[Account] Set Account"
}
export class GetAccount implements Action {
readonly type = AccountActionTypes.GetAccount;
constructor(public payload: AccounteState) { }
}
export class SetAccount implements Action {
readonly type = AccountActionTypes.SetAccount;
constructor(public payload: AccounteState) {
}
}
export type AccountActions = GetAccount | SetAccount;
帐户效果：
@Injectable()
export class AccountEffect {
constructor(private actions$: Actions,private accountSettingService: AccountSettingService) { }
@Effect()
setAccount$: Observable<Action> = this.actions$.pipe(
ofType(AccountActionTypes.GetAccount),map((action: accountActions.GetAccount) => action.payload),mergeMap((accountsetting: AccounteState) =>
this.accountSettingService.GetListItem('/SiteOption/AccountSecurity')
.pipe(
map((data) => {
if (data['success']) {
accountsetting = data['result']['accountSecuritySettingsModel'];
return new accountActions.SetAccount({
email: accountsetting.email,sms: accountsetting.sms,twoFactorAuthentication: accountsetting.twoFactorAuthentication
});
}
}
)
)
))
}
组件中的帐户使用：
ngOnInit(): void {
this.accountSettingFG = this.formBuilder.group({
twoFactorAuthentication: [''],email: [''],sms: ['']
});
this.FetchData()
}
private FetchData() {
this.store.pipe(select('account'))
.subscribe(data => {
if (data) {
this.PatchValue(data);
} else {
this.store.dispatch(new fromActions.GetAccount({ email: false,twoFactorAuthentication: false }));
}
})
}
现在出了什么问题？我该如何解决这个问题？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）