1、在actions文件夾下創建action文件appName.action.ts
|
import { Action } from "@ngrx/store";
export const types = {
UPDATE_APPNAME: "UPDATE_APPNAME"
}
export class UpdateAppNameAction implements Action {
readonly type = types.UPDATE_APPNAME;
constructor(public payload:string){}
}
export type Actions = UpdateAppNameAction
|
2、在store文件夾下創建reducer文件appName.reducer.ts
|
import * as UpdateAppNameAction from "../actions/appName.action";
// 定義 reducer的State
export interface AppNameState {};
// State的初始默認值
const initialState: AppNameState = {
appname: "test"
};
// 定義action 如何改變state的狀態
export function appNameReducer(state:AppNameState = initialState,action:UpdateAppNameAction.Actions){
switch(action.type){
case UpdateAppNameAction.types.UPDATE_APPNAME:
return Object.assign({}, state, {
appname: action.payload
});
default:
return state;
}
}
|
3、在app.module.ts中引入
|
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
StoreModule.forRoot({ appNameStateSelect: appNameReducer })
]
})
|
4、在app.component.ts中獲取，並通過action更新store中的appName
|
// 獲取到appName作為全局變量使用
setTimeout(()=>{
this.store.dispatch({// 通知action，通過action更新store
type: types.UPDATE_APPNAME,
payload: new Date()
})
},1000)// 此處在實際項目中改為從后端獲取
|
5、在模塊中調用
|
AppNameState$: Observable<AppNameState>;
constructor(private store: Store<AppNameState>) {
this.AppNameState$ = store.select("appNameStateSelect");//// 從app.module.ts中獲取appidStateSelect狀態流
}
ngOnInit() {
this.AppNameState$.subscribe((state: any) =>{
console.log(state) // 查看輸出信息即為全局變量APPName
console.log(state.appname);
})
}
|
參考：https://blog.csdn.net/gaiery/article/details/103312248（主要參考，根據此鏈接實際操作一遍）