如何使用来自不同端点的不同数据渲染组件

Question

我创建了一个简单的卡片组件，以便在我的应用程序的仪表板中使用它。

组件只是一张带有标题的卡片，卡片的内容是在数据库中注册的数量。

例如：title为Users，内容为“3299个用户注册”。

现在，我如何使用相同的组件而不是请求用户的硬编码端点来获取用户数量，而是将一些内容传递给组件，然后它使用不同的服务来获取该数据。

例如：

<simple-card type="users"></simple-card>
<simple-card type="posts"></simple-card>

所以在组件中，我得到那个“类型”并在我的 API 上请求相应的端点，所以它会在屏幕上显示如下内容：

（第一张卡片）标题：用户，内容：3299 用户注册
（第二张卡片）标题：帖子，内容：12388个帖子

我知道如何在组件中检索那个“类型”，我可以打开它来请求不同的端点，但我不知道这是否是正确的方法（我真的认为这有点hacky）。

Answer 1

您当前的解决方案完全没问题。但是，我们可以通过应用一个简单的模式来做得更好。我们将所有组件分为两类：容器组件和展示组件。

在您的情况下，SimpleCardComponent 应该是一个演示组件。 Presentational 组件只关心事物的外观，它们从父级接收数据并显示它们。

假设我们有一个 Container 组件 调用 CardGroupComponent，它是组件树中 SimpleCardComponent 的父级。像这样：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-card-group',
  template: `
    <div>
       <app-simple-card title="users" [content]="users"></app-simple-card>
       <app-simple-card title="posts" [content]="posts"></app-simple-card>
    </div>
    `
})
export class CardGroupComponent implements OnInit {
  users: number;
  posts: number;
  ngOnInit(): void {
    // do some api calls and set the value
    // for users and posts
  }
}

然后，在SimpleCardComponent 中，我们可以检索传递的数据并显示它们：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-simple-card',
  template: `
    <div>
       <h2>Title: {{title}}</h2>
       <p>Content: {{content}}</p>
    </div>
    `
})
export class SimpleCardComponent {
  @Input()
  title: string;
  @Input()
  content: number;
}

这样，我们可以轻松地重用我们的组件。那么，确切地说，您的问题应该是“如何有效地重用 Angular 组件”。

这是 CodeSandbox 上的一个工作示例项目：https://codesandbox.io/s/2opp3qn56y

有关此简单模式的更多信息，您可以查看 Dan Abramov 的这篇精彩帖子 - Redux 创建者：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0。这是该帖子的一部分：

如果您将组件分为两类，您会发现组件更易于重用和推理。我称它们为 Container 和 Presentational components*，但我也听说过 Fat 和 Skinny、Smart 和 Dumb、Stateful 和 Pure、Screens 和 Components 等。这些都不完全一样，但核心思想是相似的。