Передача шаблонов столбцов сетки Kendo Angular в родительский компонент, на котором размещена сетка

Я задал этот вопрос на Telerik Kendo Angular UI forum, и обновит оба местоположения, если я получу ответ, но эта проблема потенциально может быть связана с моими ограниченными знаниями Angular вместо функциональности Kendo.

Моя цель состоит в том, чтобы один компонент "пользователь сетки" передавал шаблоны столбцов (kendoGridCellTemplate, kendoGridHeaderTemplate и т. Д.) В родительский компонент "поставщик сетки", на котором размещен элемент, чтобы несколько пользователей сетки могли представлять одну и ту же сетку, не имея у каждого для настройки пейджинга, сортировки и т. д.

В моем приложении есть возможность искать разные товары. Все результаты поиска отображаются в пользовательском интерфейсе Kendo для сетки Angular. У каждого вида продуктов есть разные поля, которые отображаются в результатах поиска, но общая функциональность сетки всегда одинакова. Я хочу определить сетку один раз, но позволить различным поставщикам поиска предоставлять свои собственные конфигурации столбцов и данные. Однако до сих пор мне удавалось предоставить шаблоны заголовков, фильтров и ячеек только тогда, когда <ng-template kendoGridCellTemplate> и т. Д. Вложены непосредственно в элементы <kendo-grid-column>, которые вложены непосредственно под элементом <kendo-grid> - все в одном шаблоне.

См. Этот пример: https://stackblitz.com/edit/angular-htffqq

Первая сетка настроена правильно, но шаблоны ячеек находятся непосредственно под <kendo-grid-column> и <kendo-grid>. Вторая сетка, которая показывает конфигурацию по умолчанию, не распознает шаблон, предоставленный @ContentChild, и по умолчанию не имеет конфигурации.

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


person tomfumb    schedule 17.08.2018    source источник


Ответы (2)


Я не думаю, что сетка может выбирать шаблоны, предоставленные таким образом. По крайней мере, я не мог ничего выбрать с помощью ContentChild или ContentChildren из проецируемого контента. Вы можете использовать подход, который я предложил здесь - получить TemplateRef в компоненте GridProvider и отобразить его с помощью ngTemplateOutlet в шаблонах столбцов:

https://stackblitz.com/edit/angular-htffqq-ngmlgw?file=app/grid-provider.component.ts

person SiliconSoul    schedule 18.08.2018
comment
спасибо за ваш вклад, я прочитал ваш ответ перед публикацией и изначально не думал, что он жизнеспособен в моем случае. Однако редактирование кода в stackblitz делает его немного понятнее. Я попробую в понедельник - person tomfumb; 18.08.2018
comment
Еще раз спасибо, я расширил ваш пример, чтобы компонент поставщика сетки мог найти соответствующий шаблон для каждого поля. Каждая пара шаблонов, предоставленных пользователем сетки, обернута в компонент сетки-столбца, так что он может быть правильно идентифицирован поставщиком сетки, который также определяет столбцы, для которых не был предоставлен шаблон: stackblitz.com/edit/angular-htffqq-p8wies - person tomfumb; 20.08.2018

Следуя примеру @ SiliconSoul, предпочтительное решение находится здесь: https://stackblitz.com/edit/angular-htffqq-p8wies

person tomfumb    schedule 20.08.2018