Question

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

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

例如：标题为“用户”，内容为“ 3299个已注册用户”。

现在，我如何使用相同的组件来代替请求用户的硬编码终结点以获取用户数量，而是将某些东西传递给该组件，并且它使用其他服务来获取该数据。

例如：

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

因此在组件中，我得到了“类型”并在我的API上请求了相应的端点，因此它将在屏幕上显示如下内容：

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

我知道如何在组件中检索该“类型”，我可以对它进行切换以请求不同的端点，但是我不知道这是否是正确的方法（老实说，有点hacky）。

Answer 1

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

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

假设我们有一个容器组件调用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上的精彩文章。这是该帖子的一部分：

您会发现您的组件更易于重用，并考虑将它们分为两类。我称它们为“容器”和“演示组件” *，但我也听到过“胖瘦”，“聪明笨拙”，“状态纯净”，“屏幕和组件”等。这些都不完全相同，但是核心思想是相似的。

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

1 个答案: