用ng模板扩展角分量

Question

我使用Kendo作为我最喜欢的角度Ui框架。

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

到目前为止还不错，但是我几乎在我的多选择下拉列表中都需要更多的ng模板。所以我的问题是，我是否可以创建一个指令，我可以直接在主机komponent上使用它，它创建了ng模板和我需要的所有其他东西，或者这里是扩展现有组件子模板的最佳解决方案。

举例结果：

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

Answer 1

解决办法似乎比我以前想象的要容易。

创建一个新的环境指令，在该指令中，我可以访问

• ContentChild =>是可以访问所有属性的多选择组件。
• ViewChild =>是我要分配给multiselect的Headertemplate

使用这个解决方案，我可以从原始的multiselect访问所有的自然属性，并且我只在ng内容的帮助下扩展了我“需要”的函数。

sq-multiselect-tension.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-多重选择-扩展.sq：

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>

Answer 2

是的，我觉得这没什么大不了的。它只取决于您想要做什么，但是创建一个自定义头的指令似乎并不太困难。

我认为您可以使用ng-template注入和/或使用ngTemplateOutlet。

但是，我建议您查看一下kendoMultiSelectHeaderTemplate指令，以检查它到底做了什么。

如果您使用的是let-dataItem变量，请检查您是否可以在您的自定义Directive上使用它。

Answer 3

如果您计划重用多选择输入，我建议将kendo元素封装到一个单独的组件中。这样，如果您需要将一些自定义选项传递给kendo元素，您可以在一个地方这样做，它将影响所有的多重选择。