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

我正在使用Angular 5，并尝试在自定义组件中进行包装。 我的理由是封装它，以便在需要时可以轻松替换。 如果有更好的方法，请告诉我

我创建了一个自定义组件，并且有各种@Inputs（），这些@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>

标签{{item.metadata.name}
×
选项{{item.metadata.name}
×

在包装器组件中，我声明模板如下：

@ContentChild('labelTemplate', { read: TemplateRef }) labelTemplate: TemplateRef<any>;
@ContentChild('optionTemplate', { read: TemplateRef }) optionTemplate: TemplateRef<any>;

@ContentChild（'labelTemplate'，{read:TemplateRef}）labelTemplate:TemplateRef；
@ContentChild（'optionTemplate'，{read:TemplateRef}）optionTemplate:TemplateRef；

以下是包装器组件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>

标签{{item.metadata.name}
×

如何在ng select之外的ng模板中使用clear（），是否有方法获取对它的引用并调用它

---

谢谢。

好的，我知道了，这是一个解决方案，以防有人像我一样困惑。在IntelliJ中，当模板输入变量是函数时，它不会识别它们，并表示它们不可调用。不过，它确实很好。ngBootstrap模式以及close和disclose方法也会出现这种情况。这是我使用的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>

{{item.metadata.name}
×
{{item.metadata.name}

我一直在尝试做完全相同的事情。但是，我确实希望

ng select

中的

ng模板

和

ng容器

能够使用

[ngTemplateOutlet]

和

[ngTemplateOutletContext]

进行组合。不过，我从来没能让它起作用。我很想知道是否有人对此有任何想法。