Question

假设您有一个基本的反应形式，其中包含一个选择字段，如下所示：

/* .ts */
this.myForm = this.fb.group({
  hero: ['', Validators.required]
});


/* .html */
<div class="field">
  <label class="label">My hero</label>
  <div class="control">
    <div class="select">
      <select formControlName="hero">
        <option *ngFor="let hero of heroes" [value]="hero">{{ hero }}</option>
      </select>
    </div>
  </div>
</div>

并假设heroes是一个数组，其中100-150个条目在您的应用程序中多次使用，而您不想存储在数据库中。我需要以其他不相关的形式和不相关的组件（没有父子组件）重用heroes。

您如何存储和检索英雄？

目前，我有一个data.ts，其中包含我在组件heroes = heroes;中检索到的所有条目

Answer 1

最简单的方法是将该数组提取到service，您可以将其注入到要使用的每个component中。

@Injectable()
export class HeroesService {

  heroes = [];

  constructor(){
    // you can request, or set your common array here
    this.heroes = ........;
  }  
}

这样，您可以在启动服务时请求数组，并且每个组件都可以使用相同的服务。

@Component({
  selector: ....
})
export class ExampleComponent{

  constructor(private _hs: HeroesService){
    // from this point, you can access the array as _hs.heroes;
  }
}

（不要忘记将服务添加到app.module提供者）要了解如何实现这一点，check out the tutorial.

Answer 2

如果您来自React-Redux背景，则可以考虑使用NgRx在您的应用程序中实现Flux架构。它允许您通过使用精简器/选择器来控制数据流。但是，我只建议您在有更复杂的状态管理要求的情况下这样做，因为在小型Angular项目中实施NgRX / Redux可能会显得过大。否则，@ ForestG提供的答案绰绰有余。

以反应形式存储和检索选择字段的长字符串[]

2 个答案: