如何包装一个角度组件并将ng模板从外部组件传递到内部组件

Question

我正在使用Angular 5，并试图将ng-select封装在一个自定义组件中。我的理由是封装它，以便在需要时可以很容易地替换它。如果有更好的方法，请告诉我。

我创建了一个自定义组件，并且我有各种@Inputs((，它们依次传递给内部的ng-select。这一切都很好。

我的问题是如何正确地将ng-select自定义模板传递给包装的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模板中使用clear((，有没有方法可以获得对它的引用并调用它？

谢谢。

Answer 1

好吧，我在这里的解决方案中工作了，以防有人像我一样感到困惑。在IntelliJ中，当模板输入变量是函数时，它不会识别它们，并表示它们不可调用。不过它确实编译得很好。ngBootstrap模态以及关闭和驳回方法也会发生这种情况。这是我使用的ng模板，它现在正在中工作

<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>