angular - 在ngrx/store中存储Angular templateRefs

问题描述

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

我们目前正在讨论是否应该在状态中存储卡片内容模板。对我来说，这似乎有点与 ngrx 原则相矛盾。即模板是不可序列化的，可以从外部改变。但这里的问题是卡片内容可能非常复杂，并且可能有各种不同的卡片。因此，如果我们不存储模板，我们可能需要为每个案例创建一个单独的组件并创建一个{[contentId: string]: Type<ContentComponent>}映射，以便能够使用字符串 id 引用这些组件。

首先，我想问一下（我猜是一个有点自以为是的问题）-也许我的担忧是错误的，将这种结构作为角度模板存储在状态中是正常的吗？

如果这不是一个很好的解决方案，人们将如何处理这样的用例？

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

标签： angularngrxng-template

自以为是的问题需要一个自以为是的答案。我会保持简短。不要在您的商店中存储任何复杂的对象。那不是它的用途。这是关于这个主题的好读物。

基本上，商店应该提供的是：

为解耦的组件交互提供类似 Observable 的模式

为临时 UI 状态提供客户端容器

提供缓存以避免过多的 HTTP 请求

为多个参与者并发数据修改提供解决方案

您还提到您的卡片内容非常复杂，并且彼此不同。那么模板绝对不是要走的路。这意味着所有的逻辑都被包装成一个component.ts。好像有点过分了。

所以组件绝对是要走的路。我可以想象它们核心中的卡片有一些共享的功能。您可以将此功能放在抽象类中，并让您的卡片组件扩展此类

export abstract class CardComponent {
  // some shared logic
}

一些卡片组件是：

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

您建议制作包含 a 的可导出常量映射Record<string, Type<T>>非常可行，您可以将其与结合使用，ngComponentOutlet或者如果您希望通过使用ComponentFactoryResolver. 您可以检查其中任何一个链接以获得良好的实现。

另一种方法是使用ngSwitch.

基本上，您将拥有使用此开关的根模板：

<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()

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

这可能会派上用场，例如，从父级访问共享逻辑。

_{我猜我没说短}

angular - 在ngrx/store中存储Angular templateRefs

问题描述

解决方案

推荐阅读