Нужна простая многоразовая оболочка для вашего компонента Angular?

Вам нужна действительно простая многоразовая оболочка для вашего компонента Angular? А еще, вы знаете, что этот компонент всегда будет базовым компонентом и вам никогда не понадобится сложная логика в нем? Это прекрасно, я покажу вам один простой способ добиться такого поведения.

Если вы уже читали мою статью о создании сложных компонентов Angular Wrapper (здесь: https://javascript.plainenglish.io/angular-wrapper-component-e56859b6d69c), вы знаете, что существует возможность создавать расширенные оболочки, которые открыты для расширения, но их немного сложнее поддерживать и кодировать.

Итак, возьмем, к примеру, стол. Например, я создаю приложение, в котором я знаю, что буду часто использовать табличный компонент, но все же мне нужна только базовая таблица, никаких больших вещей. Кроме того, я хочу иметь возможность в будущем изменить, например, стиль таблицы или даже изменить решение таблицы, например, с простой таблицы начальной загрузки на что-то более причудливое, например, ag-grid. Сначала я выберу простую таблицу начальной загрузки. Давайте посмотрим на html-структуру таблицы начальной загрузки:

Здесь нет ничего необычного. Давайте теперь сопоставим эту таблицу с угловым компонентом. Давайте представим, что у меня есть массив элементов с именем tableSource и массив столбцов таблицы с именем tableColumns. Мой код будет выглядеть так:

Как видите, в tableColumns мы определяем определение для каждого столбца таблицы, а в tableSource у нас есть массив элементов, где каждый объект имеет свойства, определенные в Столбцы таблицы.

В нашем html-компоненте мы можем сделать что-то подобное:

Все, что мы здесь делаем, — это анализируем два массива со столбцами и элементами и визуализируем таблицу. С этого момента вы можете очень легко увидеть, куда он идет. Мы установим tableSource и tableColumns как элементы @Input в Angular, и все.

Финальный компонент-оболочка таблицы будет выглядеть так:

И, чтобы использовать наш компонент, мы сделаем:

Как видите, это более простой способ создания компонентов Angular Wrapper, который по-прежнему дает вам возможность изменять в одном месте и отражать везде. Таким образом, если вы хотите применить новые стили к таблице или добавить некоторые возможности сортировки/фильтрации в будущем, это будет проще простого.

Если у вас есть дополнительные вопросы, не стесняйтесь комментировать.