重写使用模板变量的角度指令答案

【问题标题】：Rewrite angular directive which uses template variables重写使用模板变量的角度指令
【发布时间】：2022-08-18 21:50:00
【问题描述】：

我编写了一个结构指令，在我的自定义 Select2Component 上设置了 itemTemplate

@Directive({ selector: \'[bsItemTemplate]\' })
export class BsItemTemplateDirective {
  constructor(private select2component: BsSelect2Component, templateRef: TemplateRef<any>) {
    this.select2component.itemTemplate = templateRef;
  }
}

目前它被这样使用：

<h2>Select2 with custom template</h2>
<bs-select2 (provideSuggestions)=\"onProvideTagSuggestions($event)\" [suggestions]=\"tagSuggestions\" [selectedItems]=\"selectedTags\">
    <ng-template bsItemTemplate let-item=\"item\" let-select2=\"select2\">
        <span class=\"select2-item\" [style.background]=\"item.category.color\" [style.color]=\"item.category.color | bsFontColor\">
            <span (click)=\"select2.onRemoveItem(item,$event)\">×</span>
            {{ item.text }}
        </span>
    </ng-template>
</bs-select2>

并呈现如下：

<div bsDropdown [(isOpen)]=\"isOpen\">
    <ng-container *ngFor=\"let item of selectedItems\">
        <!-- Render the template -->
        <ng-container *ngTemplateOutlet=\"itemTemplate ?? defaultItemTemplate; context: { item: item, select2: this }\"></ng-container>
    </ng-container>

    <input type=\"text\" [(ngModel)]=\"searchterm\" />
    <div *bsDropdownMenu>
        <ul>
            <li *ngFor=\"let suggestion of suggestions\">{{ suggestion.text }}</li>
        </ul>
    </div>
</div>

我希望能够使用星号 (*bsItemTemplate) 重写它

标签： angular angular-template angular-template-variable

【解决方案1】：

你可以这样做：

<bs-select2 (provideSuggestions)="onProvideTagSuggestions($event)" [suggestions]="tagSuggestions" [selectedItems]="selectedTags">
    <span *bsItemTemplate="let item = item; let select2 = select2">
        <span (click)="select2.onRemoveItem(item,$event)">×</span>
        {{ item.text }}
    </span>
</bs-select2>

【讨论】：