通过Angular NGXS的持续文本输入

Question

我有一个可以远离的组件，但我希望文本input字段能够在这些导航更改之间维护其值。

输入看起来像这样：

<input type="text" class="form-control" id="country" required [ngModel]="country" name="country" (ngModelChange)="autoChange('country',$event)" />

组件的相关部分是：

export class SearchComponent implements OnInit {
  @Select(FavouritesState.getCountry) country$: Observable<string>;

  country: string = '';

  constructor(private store: Store) {
  }

  ngOnInit(): void {
    this.country$.subscribe(c => {
      this.country = c;
    });
  }

  autoChange(field: string, $event: string): void {
    switch (field) { 
      case 'country': { 
        this.country = $event;
        this.store.dispatch(new Search.Country(this.country));
        break; 
      }
    }
  }

我试图单向将传递到input的值绑定到类变量country和调度更改为this.store.dispatch（）更改键入文本。

州阶层看起来像这样：

@State<FavouritesStateModel>({
  name: 'favouritesState',
  defaults: {
    country: ''
  }
})

@Injectable()
export class FavouritesState {
  @Action(Search.Country)
  Country(ctx: StateContext<FavouritesStateModel>, action: string) {
    ctx.setState(patch({
      country: action
    }))
  }

  @Selector()
  static getCountry(state: FavouritesStateModel) {
    return state.country
  }
}

行动类看起来像这样：

export namespace Search {
  export class Country {
    static readonly type = '[Search] Set Country';
    constructor(public country: string) {}
  }
}

我对这种相当基本的（我认为）模式做了什么错？

Answer 1

实施文本输入持久性...

输入控制：

<input type="text" class="form-control" id="country" required [ngModel]="(country$ | async)" name="country" (ngModelChange)="autoChange('country',$event)" />

状态类：

@State<FavouritesStateModel>({
  name: 'favouritesState',
  defaults: {
    country: ''
  }
})

@Injectable()
export class FavouritesState {
  @Action(Search.Country)
  Country(ctx: StateContext<FavouritesStateModel>, { country }: Search.Country) {
    ctx.setState(patch({
      country: country
    }))
  }

  @Selector()
  static getCountry(state: FavouritesStateModel) {
    return state.country
  }
}

和行动类：

export namespace Search {
  export class Country {
    static readonly type = '[Search] Set Country';
    constructor(public country: string) {}
  }
}