Question

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

我创建了一个自定义组件，并且拥有各种@Inputs（），这些@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之外的模板中使用它时，它无法识别，例如< / p>

        <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（），有什么方法可以获取对其的引用并进行调用？

谢谢。

Answer 1

好的，如果有人像我一样感到困惑，我可以在这里使用它的解决方案。在IntelliJ中，当模板输入变量是函数时，它无法识别它们并表示它们不可调用。它确实编译正常。 ngBootstrap模态以及close和dismiss方法也会发生这种情况。这是我正在使用的ng-templates

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

如何包装Angular组件并将ng-template从外部组件传递到内部组件

1 个答案: