如何从ngrx拉取信息到组件文件

import { StoreModule } from '@ngrx/store';

@NgModule({
  imports: [
    StoreModule.forRoot({}) // 创建一个空的存储
  ],
  ...
})
export class AppModule { }

export interface AppState {
  message: string;
}

export enum ActionTypes {
  LoadMessage = '[Message] Load',
  LoadMessageSuccess = '[Message] Load Success',
  LoadMessageFailure = '[Message] Load Failure'
}

import { createAction, props } from '@ngrx/store';

export const loadMessage = createAction(ActionTypes.LoadMessage);
export const loadMessageSuccess = createAction(
  ActionTypes.LoadMessageSuccess,
  props<{ message: string }>()
);
export const loadMessageFailure = createAction(
  ActionTypes.LoadMessageFailure,
  props<{ error: any }>()
);

import { Action } from '@ngrx/store';

export function messageReducer(state: string = '', action: Action): string {
  switch (action.type) {
    case ActionTypes.LoadMessageSuccess:
      return action.payload.message;
    case ActionTypes.LoadMessageFailure:
      return 'Error loading message.';
    default:
      return state;
  }
}

import { StoreModule } from '@ngrx/store';
import { messageReducer } from './reducers/message.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ message: messageReducer }) // 注册messageReducer
  ],
  ...
})
export class AppModule { }

import { Store, select } from '@ngrx/store';
import { AppState } from './app-state.interface';

export class AppComponent {
  message$: Observable<string>;

  constructor(private store: Store<AppState>) {
    this.message$ = store.pipe(select(state => state.message));
  }
}

<div>{{ message$ | async }}</div>