Как реализовать динамические элементы управления в ангуляре4?

Question

[Mariik]

Привет.

Есть такая вот задача:
реализовать динамическую таблицу для отображения произвольных данных с возможностями:

• Сортировка
  
• Фильтрация
  
• Пагинация
  
• Динамические элементы управления
  

Бог с ней с сортировкой, пагинацией и тп. А вот как сделать динамические элементы управления?

В общем о чем я - компонент должен быть переиспользуемым. те в зависимости от ситуации в таблице должны быть раные эл. управления. Ну например при отображении списка менеджеров Удалить Редактировать и тп. А вот уже при отображении списка заказаов Редактировать Отменить Заказ и тп.

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

Вариант с использованием тоже не подходит, поскольку все будет происходить в цикле.

Мне надо как-то или получить шиблон для отображения контроллов от вышестоящего элемента, или сам компонент с контроллами. Как-бы это реализовать?

Answer 1

[Urukhayy]

Чтобы использовать динамический контент внутри другого компонента, можно воспользоваться компонентом-обёрткой к таблице, который будет, в качестве графы "динамические элементы", вставлять пришедший код, посредством ng-container.

Пример вашей пользовательской таблицы, которая обернёт стандартную таблицу:

<table>
<tr>
    <td>
        Содержимое div, переданное компонентом, который воспользуется обёрткой:
        <ng-content select="div"></ng-content>
    </td>
    <td>
        Содержимое целого компонента, переданное компонентом, который воспользуется обёрткой:
        <ng-content select="app-action-buttons"></ng-content>
    </td>
</tr>
</table>

Использовать так:

Вставляем нашу обёртку-таблицу
<app-user-table>
    <div> Это наш первый столбец </div>
    А это целый компонент, который мы вставим во второй столбец:
    <app-action-buttons> </app-action-buttons>
</app-user-table>

Сортировка, Фильтрация и Пагинация есть в официальном дизайне Angular -- Material.

Comments

[Mariik]

Спасибо за ответ. У меня есть некоторые сомнения:
1. Сработает ли это внутри цикла?
2. Какой будет контекст исполнения?

[Urukhayy]

Mariik,

<tr *ngFor="let row of rows">
    <td> {{ row.fieldContent }} </td>
    <td>
        Выберите действие:
        <ng-content  select="app-action-buttons"></ng-content>
    </td>
</tr>

[Mariik]

Можно это как-то на планкере показать? А то я что уже путаться начинаю

Answer 2

[Володимир Владимирович]

Вам как-раз подойдет ngTemplateOutlet,

<ng-content select="div"></ng-content> не самое лучшее решение

https://alligator.io/angular/reusable-components-n...
https://medium.com/@MichalCafe/angulars-content-pr...
https://mattlewis92.github.io/angular-calendar/#/c...