我正在使用Angular 5并尝试将ng-select包装在自定义组件中。我的理由是封装它,以便在需要时可以轻松更换。如果有更好的方法,请告诉我。
我创建了一个自定义组件,我有各种@Inputs(),然后传递给内部ng-select。一切正常。
我的问题是如何正确地将ng-select custom templates传递给包装的ng-select?
这是我到目前为止的一个例子,为简单起见,我省略了一些输入。
这就是我在自定义模板中调用包装器的方式:
<app-wrapper-select
[items]="cars"
[(selected)]="selectedCars">
<ng-template #labelTemplate ng-label-tmp let-item="item">
<span class="ng-value-label">LABEL {{item.metadata.name}}</span>
<span class="ng-value-icon right" aria-hidden="true">×</span>
</ng-template>
<ng-template #optionTemplate ng-option-tmp let-item="item">
<span class="ng-value-label">OPTION {{item.metadata.name}}</span>
<span class="ng-value-icon right" aria-hidden="true">×</span>
</ng-template>
</app-wrapper-select>
在包装器组件中,我声明模板如下:
@ContentChild('labelTemplate', { read: TemplateRef }) labelTemplate: TemplateRef<any>;
@ContentChild('optionTemplate', { read: TemplateRef }) optionTemplate: TemplateRef<any>;
这是包装组件html:
<ng-select
[items]="items"
[(ngModel)]="selected">
<ng-template ng-label-tmp let-item="item">
<ng-container *ngTemplateOutlet="labelTemplate; context:{item: item}"></ng-container>
</ng-template>
<ng-template ng-option-tmp let-item="item">
<ng-container *ngTemplateOutlet="optionTemplate; context:{item: item}"></ng-container>
</ng-template>
</ng-select>
上面的内容有点呈现模板,但标签和选项都缺少所有样式,只是在白色背景上显示为文本。
我一定错过了什么,我怎样才能让风格正确呈现?
另一个问题是ng-select在每个标签上都有一个关闭按钮,可以从所选项目中删除它以及相关的clear()方法 - 但是当我在ng-select之外的模板中使用它时,它不会被识别,例如
<ng-template #labelTemplate ng-label-tmp let-item="item" let-clear="clear">
<span class="ng-value-label">LABEL {{item.metadata.name}}</span>
<span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
</ng-template>
如何在ng-select之外的ng-template中使用clear(),是否有某种方法可以获得对它的引用并调用它?
谢谢。
好吧,我得到了它在这里工作的解决方案,以防有人像我一样感到困惑。在IntelliJ中,当模板输入变量是函数时,它不识别它们并且表示它们不可调用。它虽然编译得很好。使用ngBootstrap模态以及close和dismiss方法也会发生这种情况。这是我使用的ng-template,现在正在使用
<app-wrapper-select
[items]="cars"
[(selected)]="selectedCars">
<ng-template #labelTemplate ng-label-tmp let-item="item" let-clear="clear">
<span class="ng-value-label">{{item.metadata.name}}</span>
<span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
</ng-template>
<ng-template #optionTemplate ng-option-tmp let-item="item">
<span class="ng-value-label">{{item.metadata.name}}</span>
</ng-template>
</app-wrapper-select>
<ng-select
[items]="items"
[(ngModel)]="selected">
<ng-template ng-label-tmp let-item="item" let-clear="clear">
<ng-container *ngTemplateOutlet="labelTemplate; context:{item: item, clear: clear}"></ng-container>
</ng-template>
<ng-template ng-option-tmp let-item="item">
<ng-container *ngTemplateOutlet="optionTemplate; context:{item: item}"></ng-container>
</ng-template>
</ng-select>