在Angular中,service
是一种用于封装可重用的业务逻辑的类。它们通常用于在组件之间共享数据和方法。ngrx
是一个状态管理库,用于Angular应用程序,它基于Redux模式,帮助管理应用程序的状态。
当你在Angular中使用service
或ngrx
时,可能会遇到返回undefined
的情况。这通常是由于以下原因之一:
undefined
。// my.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyService {
getData() {
return 'some data';
}
}
// my.component.ts
import { Component } from '@angular/core';
import { MyService } from './my.service';
@Component({
selector: 'app-my',
template: `<div>{{ data }}</div>`
})
export class MyComponent {
data: string;
constructor(private myService: MyService) {
this.data = this.myService.getData();
}
}
// store.ts
import { createAction, createReducer, on, createSelector, createFeatureSelector } from '@ngrx/store';
export const initialState = {
data: undefined
};
export const setData = createAction('[Data] Set Data', (data: any) => ({ data }));
export const dataReducer = createReducer(
initialState,
on(setData, (state, { data }) => ({ ...state, data }))
);
// app.module.ts
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { dataReducer } from './store';
@NgModule({
imports: [
StoreModule.forRoot({ data: dataReducer })
]
})
export class AppModule {}
// my.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { setData } from './store';
@Component({
selector: 'app-my',
template: `<div>{{ data$ | async }}</div>`
})
export class MyComponent {
data$ = this.store.select(state => state.data);
constructor(private store: Store) {
this.store.dispatch(setData({ data: 'some data' }));
}
}
// store.ts
export const initialState = {
data: 'initial data'
};
// store.ts
export const selectData = createSelector(
(state) => state.data,
(data) => data
);
// my.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectData } from './store';
@Component({
selector: 'app-my',
template: `<div>{{ data$ | async }}</div>`
})
export class MyComponent {
data$ = this.store.select(selectData);
constructor(private store: Store) {}
}
通过以上步骤,你应该能够解决在使用Angular的service
和ngrx
时遇到的undefined
问题。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云