Универсальный компонент в Angular с API создания / удаления, специфичным для нескольких контекстов

Question

Я хотел бы иметь общий компонент для комментариев. Этот компонент имеет сложные графические значения, и мне нужно повторно использовать для двух разных контекстов с той же моделью данных. Я хочу объяснить на примере. У меня есть два разных API для добавления нового комментария к списку в контексте A и B. Итак, я:

AComponent со списком комментариев и кнопкой для добавления одного (или удаления).
BComponent со списком комментариев и кнопкой для добавления одного (или удаления).

Оба используют одну и ту же модель (IComment) и графические детали, но разные API для создания / удаления.

До сих пор я обрабатывал этот сценарий использования с источником событий и делегировал вызов API родителям, принадлежащим компонентам A и B.

Но если API возвращает ошибку проверки сервером, я хочу, чтобы обработчик в компоненте комментария показывал детали графики ошибок. Как я могу это сделать? Лучшая практика для этого варианта использования?

Answer 1

Используйте обмен данными между родительским и дочерним компонентами. Вы уже отправляете событие от ребенка к родителю. Теперь свяжите свойство в родительском компоненте, чтобы передать данные (комментарии / ошибки) дочерним компонентам. Вы можете 1) определить 2 разные переменные @Input() для комментариев и моделей HTTPErrorResponse, или 2) определить одну переменную Input, передать комментарии / ответ об ошибке от parent, дифференцировать компонент и представление для отображения в соответствии с типом Input.