2

我有一个名为select.component (selector: 'app-select') 的组件，它使用 typeahead 搜索用户（为简单起见，我省略了这个）。然后我想通过绑定到 ng-template 中的项目来显示名称和employeeId。

<ng-select>
  <ng-template ng-option-tmp let-item="item">
    {{item.name}}</br>
    {{item.employeeId}}
  </ng-template
</ng-select>

由于我们在应用程序中使用了许多这些 ng-select 元素，因此我将 select.component 设置为其他父组件使用的可重用组件。因此，我想让 ng-template 部分动态化并从父组件传入。我已将 select.component 更改为如下所示：

<ng-select>
  <ng-template ng-option-tmp let-item="item">
    <ng-content></ng-content>
  </ng-template
</ng-select>

然后我有user.component，它使用内容投影在 select.component 中填充 ng-template ，如下所示：

<app-select>
  {{item.name}}</br>
  {{item.employeeId}}
</app-select>

这里的问题是，当内容投影已经将 app-select 的内部 html 传递给 ng-template 时，{{item.name}} 和 {{item.employeeId}} 不会在 ng-template 中进行评估。在项目的下拉列表中，我看到的是 {{item.name}}，而不是实际的名称值。

我怎样才能最好地做到这一点？我真的需要父组件能够指定下拉项应该如何显示以使 select.component 完全可重用。

看我的堆栈闪电战

4

3 回答 3

1

您需要在组件中传递代码并在选择组件中捕获

<app-select>
  <ng-select [items]="items" bindLabel="name" placeholder="Works">
    <ng-template ng-option-tmp let-item="item">
        {{item.name}}<br/>
        {{item.employeeId}}
  </ng-template>
</ng-select>
</app-select>

然后你需要使用

<ng-content></ng-content>

在您选择的组件中

这样你就可以实现你想要的。

于 2018-06-21T15:12:35.557 回答
1

我同意将通用设置封装在组件中并允许其余设置由组件的使用者提供是有帮助的。

当父级提供模板时， NgSelect 用于@ContentChild()获取组件标签中提供的模板。我怀疑<ng-content>它还不可用，因为ngAfterContentInit之前调用了生命周期钩子ngAfterViewInit。

另一种方法是在视图初始化后接受 aTemplateRef作为您的输入<app-select>并手动设置 NgSelect optionTemplate：

export class SelectComponent implements AfterViewInit {
  @Input() items: any[];
  @Input() optionTemplate: TemplateRef<any>; // The options template to provide to ng-select

  @ViewChild(NgSelectComponent) ngSelect: NgSelectComponent; // A reference to the ng-select component

  // Once @ViewChild is defined after view init
  ngAfterViewInit() {
    if (this.optionTemplate) {
      // Manually assign ng-select's optionTemplate from the input
      this.ngSelect.optionTemplate = this.optionTemplate;
    }
  }
}

然后你可以传入一个可以通过引用变量引用的模板：

<app-select [items]="items" [optionTemplate]="appSelectOption">
</app-select>

<ng-template #appSelectOption let-item="item">
  {{item.name}}<br/>
  {{item.employeeId}}
</ng-template>

这样，您可以将模板出口上下文 ( let-item="item") 保留在使用变量的同一区域中。

查看你的 StackBlitz的一个分支

于 2019-06-14T21:09:02.043 回答
0

如果没有任何结构指令或模板引用变量，ng-template 永远不会工作。您可以使用 ng-container 而不是 ng-template.sorry 缺少任何东西，因为我已经用手机回答了这个问题

于 2018-06-21T15:22:53.790 回答