Angular 在ngrx/store内存储角度模板EF

我们现在正在为我们的应用程序构建上下文帮助卡系统。该应用程序大量使用ngrx，我们正在努力遵循良好的实践

我们目前正在讨论是否应该在该州存储卡内容模板。对我来说，这似乎有点与ngrx的原则相矛盾。也就是说，模板不可序列化，可以从外部进行变异。但这里的问题是，卡片的内容可能相当复杂，并且可能有各种不同的卡片。因此，如果我们不存储模板，我们可能需要为每种情况创建一个单独的组件，并创建一个{[contentId:string]：Type}映射，以便能够引用具有字符串ID的组件

首先，我想问一个有点自以为是的问题，我想-也许我的担心是错误的，在状态中存储这样的结构作为角度模板是正常的

如果这不是一个很好的解决方案，那么如何处理这样的用例呢

---

谢谢你们，很抱歉我提出了一个自以为是的问题。我知道他们在这里不太受欢迎。

自以为是的问题需要自以为是的回答。我会尽量简短。不要在存储中存储任何复杂的对象。这不是它的目的。这是一个关于这个主题的好例子

基本上，商店应该提供：

为解耦的组件交互提供类似可观察的模式 为临时UI状态提供客户端容器 提供缓存以避免过多的HTTP请求 提供由多个参与者同时修改数据的解决方案 您还提到，您的卡片内容非常复杂，并且彼此不同。那么模板肯定不是一个好办法。这意味着所有逻辑都被包装到一个组件中。似乎有点过分

因此，组件无疑是未来的发展方向。我可以想象，它们核心的卡共享了一些功能。您可以将此功能放在一个抽象类中，并让您的卡组件扩展此类

export abstract class CardComponent {
  // some shared logic
}

一些卡片组件可能是：

@Component({...})
export class SomeCardComponent extends CardComponent {
  constructor() {
    super();
  }
}

您关于制作包含记录的可导出常量映射的建议听起来非常可行，您可以将其与结合使用，或者如果您希望通过使用进行更多控制，则可以使用。您可以检查这些链接中的任何一个，以获得良好的实现

另一种方法是使用

基本上，您将使用此开关获得根模板：

<ng-container [ngSwitch]="card.id">
  <some-card *ngSwitchCase="'some-card'"></some-card>
  <other-card *ngSwitchCase="'other-card'"></other-card>
  <!-- etc -->
</ng-container>

在父组件中，可以使用

这可能很方便，例如，从父级访问共享逻辑

我想我没有保持简短

@Component({
  selector: 'some-card',
  providers: [
    { provide: CardComponent, useExisting: SomeCardComponent }
  ]
})
export class SomeCardComponent extends CardComponent { //... }

@ViewChildren(CardComponent)
cardComponents: QueryList<CardComponent>;