Блог

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

Моя Column конфигурация выглядит следующим образом

 export interface Column {
  field: string;  
  displayValue?: string;
  cellTemplate?;
}
  

и затем в моем TableComponent я создаю таблицу на основе переданных данных и массива столбцов.

Но теперь я хочу попытаться сделать его немного более продвинутым и иметь возможность передавать в CellTemplate что-то вроде

 {
field: 'firstName',
displayValue: 'First Name',
cellTemplate: '<h1>My Name is {{cell}}</h1>
}
  

А затем сделайте еще один шаг вперед и сможете передавать событие onlclick из родительского компонента вместе с ним…

 {
field: 'firstName',
displayValue: 'First Name',
cellTemplate: '<button (click)="parentClick(cell)">Click Me to find out my name</button>'
}
...
parentClick(cell){
alert('My Name is '   cell);
}
...
  

Но я вроде как застрял. Я обнаружил, что могу передать статический шаблон типа <h1>Hello World</h1> , а затем использовать [innerHTML]=»CellTemplate», но это все, что я пока могу выяснить

Если вы хотите изменить содержимое шаблона с помощью выражения или значения, вы можете передать любое значение из родительского компонента в дочерний компонент с помощью @Input . Но если вы хотите передать статический шаблон, вы можете использовать проекцию содержимого. Пожалуйста, перейдите по этой ссылке, как использовать проекцию содержимого. https://www.infragistics.com/community/blogs/b/infragistics/posts/simplifying-content-projection-in-angular