Как отобразить компонент с разными данными с разных конечных точек - PullRequest
Новая
       37

Как отобразить компонент с разными данными с разных конечных точек

0 голосов
/ 26 сентября 2018

Я создал простой карточный компонент, чтобы использовать его на информационной панели моего приложения.

Компонент - это просто карточка с заголовком, а содержимое карточки равно количеству зарегистрированных вбаза данных.

Например: title - «Пользователи», а контент - «3299 зарегистрированных пользователей».

Теперь, как мне использовать этот же компонент вместо того, чтобы запрашивать жестко закодированную конечную точку пользователей дляполучить количество пользователей, я передаю что-то компоненту, и он использует другой сервис для получения этих данных.

Например: 

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

Итак, в компоненте я получаю это "введите "и запросите соответствующую конечную точку в моем API, чтобы на экране отобразилось что-то вроде этого:

(Первая карта) Заголовок: пользователи, Содержимое: зарегистрировано 3299 пользователей
(Вторая карта) Заголовок:posts, Content: 12388 posts

Я знаю, как извлечь этот «тип» в компоненте, и я мог бы просто включить его, чтобы запросить разные конечные точки, но я не знаю, является ли этоправильный способ сделать это (я, честно говоря, думал, что это немного глупо).

1 Ответ

0 голосов
/ 26 сентября 2018

Ваше текущее решение полностью в порядке.Однако мы могли бы сделать это лучше, применив простой шаблон.Мы делим все наши компоненты на две категории: Контейнер и Презентационные компоненты.

В вашем случае SimpleCardComponent должен быть Презентационный компонент . Презентационный компонент заботится только о том, как вещи выглядят, они получают данные от своих родителей и отображают их.

Предположим, что у нас есть Контейнерный компонент , вызывающий 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;
}

Таким образом, мы можем легко повторно использовать наши компоненты.Тогда, если быть точным, ваш вопрос должен быть «Как эффективно использовать угловой компонент».

Это рабочий пример проекта на CodeSandbox: https://codesandbox.io/s/2opp3qn56y

Для получения дополнительной информации об этом простом шаблоне, вы можете взглянуть на этот удивительный пост от Дана Абрамова - Создатель Redux: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0.Это часть этого поста:

Вы обнаружите, что ваши компоненты гораздо проще использовать и рассуждать, если вы разделите их на две категории.Я называю их Контейнерными и Презентационными компонентами *, но я также слышал «Толстый и Тощий», «Умный и тупой», «Состояния и чистота», «Экраны и компоненты» и т. Д. Они не совсем одинаковы, но основная идея схожа.

...