расширить угловой компонент с помощью ng-шаблона - PullRequest
Новая
       7

расширить угловой компонент с помощью ng-шаблона

0 голосов
/ 25 апреля 2018

Я использую Kendo Ui в качестве своего любимого Ui Framework для Angular. 

<kendo-multiselect [data]="listItems" [(ngModel)]="value">
       <ng-template kendoMultiSelectHeaderTemplate let-dataItem>
            <strong (click)="toggleSelection()">Alle Auswählen</strong>
         </ng-template>
</kendo-multiselect>

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

пример результата: 

<kendo-multiselect my-multiselectHeader 
                   [data]="listItems" 
                   [(ngModel)]="value">
</kendo-multiselect>

Ответы [ 3 ]

0 голосов
/ 25 апреля 2018

Если вы планируете использовать многоэлементный вход, я бы предложил обернуть элемент кендо в отдельный компонент.Таким образом, если вам когда-либо понадобится передать некоторые пользовательские параметры элементу kendo, вы можете сделать это в одном месте, и это повлияет на все мультиселекты.

0 голосов
/ 16 мая 2018

Решение кажется проще, чем я думал раньше.

Я создаю новую директиву окружения, в которой я могу получить доступ к

  • ContentChild => - компоненту множественного выбора, где мы имеемДоступ ко всем свойствам
  • ViewChild => - это заголовочный шаблон, который я хочу назначить для мультиселекта

. С помощью этого решения я могу получить доступ ко всем естественным свойствам из оригинального мультиселектора, и я только расширяюнужные мне функции с помощью ng-content

sq-multiselect-extension.html: 

<ng-template kendoMultiSelectHeaderTemplate let-dataItem>
   <strong (click)="toggleSelection()" class="m-2 link-cursor">Alle Auswählen</strong>
</ng-template>
<ng-content></ng-content>

sq-multiselect-extension.ts: 

import { Component, OnInit, ViewChild, ContentChild } from    '@angular/core';
import { HeaderTemplateDirective, MultiSelectComponent } from '@progress/kendo-angular-dropdowns'
@Component({
    selector: 'sq-multiselect-extension',
    templateUrl: './sq-multiselect-extension.html',
})
export class SxpMultiselectComponent implements OnInit {

    @ViewChild(HeaderTemplateDirective) headerTemplate: HeaderTemplateDirective;
    @ContentChild(MultiSelectComponent) multiselect: MultiSelectComponent;

public ngOnInit() {
  this.multiselect.headerTemplate = this.headerTemplate;
}

public toggleSelection(): void {
  if (this.multiselect.value.length > 0) {
    this.multiselect.reset();
  }
  else {
     this.multiselect.writeValue(this.multiselect.data)
     this.multiselect.value = this.multiselect.data.slice();
  } 
 }
}

и использовать этот новый компонент 

<sq-multiselect-extension>
    <kendo-multiselect [data]="listStringItems" [(ngModel)]="value" class="form-control">
    </kendo-multiselect>
</sq-multiselect-extension>
0 голосов
/ 25 апреля 2018

Да, я думаю, что это не имеет большого значения.Это зависит только от того, что вы хотите сделать, но создание директивы для настройки заголовка не кажется слишком сложным.

Я думаю, что вы можете играть с ng-template инъекцией и / или использованием ngTemplateOutlet.

Но я предлагаю вам взглянуть на директиву kendoMultiSelectHeaderTemplate, чтобы точно проверить, что она делает.

Если вы используете let-dataItemпеременная, проверьте, что вы можете использовать его в любом случае на вашем Directive.

...