角度 2 自定义自动完成<ng-content>的动态显示

Question

我正在创建一个自动完成组件，我正在尝试弄清楚如何处理项目的"显示"。我已经尝试使用ng-content并渲染该项目，但失败了。我想要的是一种使我们ng-content并将"数据"传递给子女内容的方法。当我尝试传递内容时，它总是失败，并说"项目"不确定。

<input-auto-complete
    [data]="searchResults"
    (onItemSelected)="onItemSelected($event)"
    (onSearch)="onSearch($event)">
       {{item.Name}}
</input-auto-complete>

简而言之，我正在创建一个进行自动完成/搜索的输入，但是我无法找到一种让人们自定义如何显示结果的好方法。

我正在使用离子，但我的模板看起来像：

<ion-searchbar
           [(ngModel)]="search"
            (ionInput)="updateSearch()"
            (ionCancel)="dismiss()">
</ion-searchbar>
<ion-list>
  <ion-item *ngFor="let item of data"
          tappable
          (click)="onItemSelected(item)">
         <!-- i found a way to do something like this where they can pass a function to display -->
         <ng-container *ngIf="!display">
            <pre>{{item|json}}</pre>
          </ng-container>
          <ng-container *ngIf="display">
            {{display(item)}}
          </ng-container>

          <!-- could not get this to work this would be my preference allow people to put whatever in here and it would get rendered and passed "item" -->
         <!-- if i enable this it breaks  <ng-content ></ng-content>   ->
  </ion-item>
</ion-list>

当它崩溃并说无法读取未定义的名称时。它没有将任何东西传递给ng-content。

谁能为此建议解决方案吗？让我知道事情是否没有意义。

Answer 1

有趣的问题。不幸的是，我没有解决方案可以提供的解决方案，但我在此处发布此信息（VS在评论中）用于空间和格式。

您的代码不起作用，因为item仅在 CHILD （autocomplete）的上下文中定义，并且在 parent 的上下文中进行了评估。因此，当在父母中评估item.Name时，item不确定。

我看不到简单的解决方案。基本上，您希望能够编译字符串（<input-auto-complete>元素中的内容），就好像它是另一个模板一样 - <input-auto-complete>的模板。

这是我希望会有所帮助的几个想法（不幸的是，它们都不理想）：

1。将孩子的属性和方法暴露于父模板

您可以通过在孩子上声明模板参考变量来做到这一点：

<input-auto-complete #ac>
  <!-- Now you can access the data from the autocomplete via ac.data -->
  <ul>
    <li *ngFor="let item of ac.data">{{ item.name }}</li>
  </ul>
</input-auto-complete>

nb。我还没有测试过。请注意data是异步的，最初可能无法定义。

2。用您的自定义语法

替换Angular的插值

类似：

<input-auto-complete>
  <div>__ITEM__</div>
</input-auto-complete>

然后，在孩子中，我会解析上面的字符串进行搜索＆amp;用其实际值替换__ITEM__。非常低级，有点反图案（直接操纵皱眉），感觉就像在重新发明轮子...

3。用TemplateRef

替换ng-content

我的理解是，您想让用户提供蓝图 如何在自动完成建议中显示每个项目。我想您将要动态重复提供的标记。

我不知道您可以使用ng-content轻松地做到这一点（例如，您不能执行<ng-content *ngFor="...">）。使用TemplateRef。

会更容易

要以templateref获取项目"蓝图"标记，请将其包装在<template>标签中：

<input-auto-complete>
  <template #itemTemplate>
    <div>__ITEM__</div>
  </template>
</input-auto-complete>

您需要用以下方式识别模板：

• 模板变量，即 <template #itemTemplate>（ng-bootstrap模态这样做）。
• 或自定义指令，即<template itemTemplateDir>（NG-Bootstrap Tabs这样做）。

然后，在自动完成组件中，您可以使用@ContentChild装饰器来固定模板：

• 使用模板变量名称（引号）：@ContentChild('itemTemplate') itemTpl
• 或指令类（无引号）：@ContentChild(itemTemplateDir) itemTpl

最后，您可以使用ViewContainerRef.CreateembedDedView（Templateref）按照自己的规则打印出模板。