angular - ng-select 可重用模板

Question

我正在使用 ng-select ( https://github.com/ng-select/ng-select ) 库来处理多选下拉列表。它工作得很好，但现在我需要重用我的 ng 模板，我有点迷路了。几周前我开始研究 Angular 10，并在谷歌上搜索到我需要一些帮助。

我的 ng 模板如下所示：

<ng-template ng-header-tmp let-item$="item$">
  <div>
      <input type="text" appAutofocus class="form-control input-sm ng-select-search-box" placeholder="Filter" (input)="ngSelectControl.filter($event.target.value)">
  </div>
  <div>
      <button class="btn btn-link btn-sm" (click)="selectAll()"><i class="fas fa-check"></i> All</button>
      <button class="btn btn-link btn-sm" (click)="ngSelectControl.clearModel()"><i class="fas fa-times"></i> None</button>
  </div>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
  <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected" /> {{item[ngSelectControl.bindLabel]}}

  <ng-template ng-multi-label-tmp let-items="items" let-items$="items$" let-index="index" let-clear="clear">
    <div class="ng-select-selected-items">
      <div class="ng-value" *ngFor="let item of items; let last = last">
        <span>{{item[ngSelectControl.bindLabel]}}</span><span *ngIf="!last">, </span>
      </div>
    </div>

  </ng-template>
</ng-template>

当它在 ng-select 中时它工作得很好，但是因为我希望我的所有下拉列表都具有相同的功能，所以我希望它是可重用的。我的想法是将 ng-template 移动到一个组件（ng-select-search-template），然后在 ng-select 中渲染该组件，但这不起作用。它完全被忽略了。

<ng-select #apiQueues [items]="Filters?.TaskQueues" [multiple]="true" [closeOnSelect]="false" [searchable]="false" bindLabel="FriendlyName" bindValue="Sid" placeholder="[Queues]" [selectableGroup]="true" [selectableGroupAsModel]="false" [(ngModel)]="Filters?.Selection.TaskQueueIds">
            <ng-select-search-template [ngSelectControl]="apiQueues"></ng-select-search-template></ng-select>

标签： angularangular-ngselect

Answer 1

我最终创建了一个包装 ng-select 的组件。我正在共享代码，以防有人试图实现相同的目标：

组件html：

<ng-select
  #ngSelectControl [items]="items" [multiple]="true" [closeOnSelect]="false" [searchable]="false"
  bindLabel="{{bindLabel}}" bindValue="{{bindValue}}" placeholder="{{placeholder}}" [selectableGroup]="true" [selectableGroupAsModel]="false"
  [(ngModel)]="model" (ngModelChange)="modelChange.emit(model)">
  <ng-template ng-header-tmp let-item$="item$">
    <div>
        <input type="text" appAutofocus class="form-control input-sm ng-select-search-box" placeholder="Filter" (input)="ngSelectControl.filter($event.target.value)">
    </div>
    <div>
        <button class="btn btn-link btn-sm" (click)="selectAll()"><i class="fas fa-check"></i> All</button>
        <button class="btn btn-link btn-sm" (click)="ngSelectControl.clearModel()"><i class="fas fa-times"></i> None</button>
    </div>
  </ng-template>
  <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
    <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected" /> {{item[ngSelectControl.bindLabel]}}

    <ng-template ng-multi-label-tmp let-items="items" let-items$="items$" let-index="index" let-clear="clear">
      <div class="ng-select-selected-items">
        <div class="ng-value" *ngFor="let item of items; let last = last">
          <span>{{item[ngSelectControl.bindLabel]}}</span><span *ngIf="!last">, </span>
        </div>
      </div>

    </ng-template>
  </ng-template>
</ng-select>

组件 ts 代码：

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'wz-multiselect',
  templateUrl: './wz-multiselect.component.html',
  styleUrls: ['./wz-multiselect.component.css']
})
export class WzMultiselectComponent implements OnInit {

  @Input() items: any;
  @Input() bindLabel: string;
  @Input() bindValue: string;
  @Input() placeholder: string;
  @Input() model: any;
  @Output() modelChange = new EventEmitter<string>();

  constructor() { }

  ngOnInit(): void {
  }

  selectAll() {
    this.model = this.items.map(p => p[this.bindValue]);
    this.modelChange.emit(this.model);
  }

}