如何将状态值赋给Angural组件中的字符串变量[ngrx Store]

npm install @ngrx/store

// app.state.ts

export interface AppState {
  stringValue: string;
}

export const initialState: AppState = {
  stringValue: ''
};

// app.actions.ts

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

export const setStringValue = createAction('[App] Set String Value', props<{ value: string }>());

// app.reducer.ts

import { createReducer, on } from '@ngrx/store';
import { setStringValue } from './app.actions';
import { initialState } from './app.state';

export const appReducer = createReducer(
  initialState,
  on(setStringValue, (state, { value }) => ({ ...state, stringValue: value }))
);

// app.module.ts

import { StoreModule } from '@ngrx/store';
import { appReducer } from './app.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ app: appReducer })
  ]
})
export class AppModule { }

// app.component.ts

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { AppState } from './app.state';
import { setStringValue } from './app.actions';

@Component({
  selector: 'app-root',
  template: `
    <div>{{ stringValue }}</div>
    <button (click)="updateValue()">Update Value</button>
  `
})
export class AppComponent {
  stringValue: string;

  constructor(private store: Store<AppState>) {
    this.store.pipe(select(state => state.app.stringValue)).subscribe(value => {
      this.stringValue = value;
    });
  }

  updateValue() {
    this.store.dispatch(setStringValue({ value: 'New Value' }));
  }
}