Angular / Kendo Grid: "HTML Helper" Эквивалент / подшаблон для столбцов сетки? - PullRequest
1 голос
/ 04 марта 2020

Мне интересно, есть ли эквивалент Razor Helper / ASP. NET MVC HTML Помощники в Angular.

Сценарий: у меня есть куски HTML что я хочу иметь возможность хранить в одном месте, чтобы я мог поместить их в один и тот же компонент несколько раз без необходимости много копировать / вставлять код.

Почему компоненты не работают: разделы из HTML Я хочу разделить, находятся в пределах более крупного компонента HTML. И этот компонент ожидает, что существуют только указанные c дочерние компоненты. В данном случае это Kendo Grid .

В типичной Kendo Grid для Angular HTML выглядит примерно так:

<kendo-grid [data]="gridData" [height]="410">
    <kendo-grid-column field="ProductID" title="ID" width="40"></kendo-grid-column>
</kendo-grid>

In В моем сценарии у меня есть коллекция kendo-grid-column, которые по сути повторяются. Было бы здорово, если бы я мог разделить их на отдельные части, которые я мог бы вызывать несколько раз:

<kendo-grid [data]="gridData" [height]="410">
    <app-some-complicated-set-of-columns [data]="childCollection1"></app-some-complicated-set-of-columns>
    <app-some-complicated-set-of-columns [data]="childCollection2"></app-some-complicated-set-of-columns>
    <app-some-complicated-set-of-columns [data]="childCollection3"></app-some-complicated-set-of-columns>
</kendo-grid>

К сожалению, Kendo не отображает столбцы в этом компоненте. Я пытался сделать то же самое в элементе <kendo-grid-column-group>, но если вы попробуете это, он выдаст ошибку, а не просто не отобразит их. Кое-что с эффектом «вы можете поместить только <kendo-grid-column> экземпляров компонентов внутри <kendo-grid-column-group>».

Хотя, вероятно, не существует способа обойти ни один из них, я хотел бы услышать, если есть есть ли в Angular какие-либо способы сказать «замените это разделом HTML напрямую, как если бы оно было записано внутри строки». * Angular проблема, добро пожаловать.

1 Ответ

2 голосов
/ 04 марта 2020

Не уверен, правильно ли я понимаю вопрос, но чтобы заменить раздел HTML напрямую, вы пишете его в дочернем компоненте родительского компонента, который вы играете с ngTempateOutlet и / или ngTemplateOutletContext, и / или ngTemplateOutletContext

Для Кендо, кажется, они поддерживают это следующим образом: - https://www.telerik.com/kendo-angular-ui/components/grid/api/CellTemplateDirective/

Вы можете попробовать создать отдельные компоненты для повторяющейся логики c и дать ее внутри ng-шаблона, чтобы избежать повторения код

...