Повторите ng-шаблон с ng-контентом в качестве тела (создайте копию ng-контента) - PullRequest
Новая
       37

Повторите ng-шаблон с ng-контентом в качестве тела (создайте копию ng-контента)

0 голосов
/ 04 апреля 2019

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

Проблема, с которой я сталкиваюсь, заключается в том, что я не могу повторить компонент ng-template несколько раз.

Мои версии

  • Угловой 7.2.12
  • Primeng 7.1.0
  • @ угловой / анимации7.2.12

Чего я хочу достичь

Я хочу создать оболочку, которая упрощает создание столбцов и устраняет необходимость создания несколькихшаблоны в теле таблицы.

Пример того, что я хочу упростить: 

<table>
 <!-- Row 1 -->
 <ng-template #header><th>edit></th></ng-template>
 <ng-template #content><button>edit></button></ng-template>

 <!-- Row 2 -->
 <ng-template #header><th>delete></th></ng-template>
 <ng-template #content><button>delete></button></ng-template>
</table>

Я хочу упростить это до: 

<table>
  <!-- Row 1 -->
  <custom-column>
    <th header>edit></th>
    <button>edit></button>
  </custom-column>

  <!-- Row 2 -->
  <custom-column>
    <th header>delete></th>
    <button>delete></button>
  </custom-column>
</table>

Я почти получил этоработая в этом StackBlitz

Проблема

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что мне нужно повторять шаблон содержимого для каждогострока в таблице, так что есть кнопка редактирования и удаления для каждой строки.Но при такой настройке кнопки отображаются только в последнем ряду (я думаю, это потому, что ng-content включает только один раз?).

Возможно ли то, чего я пытаюсь достичь, и если да, то как мне изменить свой код?

1 Ответ

1 голос
/ 04 апреля 2019

Поскольку компонент ng-content не поддерживает проецирование одного и того же контента несколько раз ( здесь и здесь ), мне нужно было переключиться на внедрение шаблонов в компонент таблицы.

Вдохновленный тем, как Primeng решает эту проблему (путем создания директивы, содержащей шаблон): 

@Directive({ selector: '[pTemplate]' })
export class PrimeTemplate {

  @Input() type: string;

  @Input('pTemplate') name: string;

  constructor(public template: TemplateRef<any>) { }

  getType(): string {
    return this.name;
  }
}

Использование: <ng-template pTemplate="header"></ng-template

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

Поскольку я хотел сохранить гибкость, но хотел избежать сравнения строк (обратите внимание на свойство 'name') и необходимости извлекать правильные шаблоны из querylist В итоге я создал 2 директивы, которые можно использовать следующим образом (вроде того же, что и в примере с моей первой попыткой, но с лучшей реализацией): 

<ng-container>
  <ng-template appColHeader>Delete</ng-template>
  <ng-template appColContent><button>Not here!</button></ng-template>
</ng-container>

Полная реализация этого кода может быть найдена в следующем StackBlitz .

...