javascript - 动态实例化一个 ng-template 并以 angular 5 创建 HTML

Question

我正在尝试构建一个 typeahead.js 用于 Angular 5 的组件。我有一个 working plunker ，尽我所能。

当组件 type-head 被声明时，一个 ng-template 被提供给组件。

<type-head>
    <ng-template #hint let-hint="hint">name: {{hint.name}}</ng-template>
</type-head>

每个提示都应显示name: sam|frodo|pippin 等

type-head 组件声明如下:

@Component({
  selector: 'type-head',
  template: `
    <input #input class="form-control" />
    <ng-content #content></ng-content>
  `
})

当 typeahead.js 组件需要显示提示时，它会执行一个回调，suggest 方法应该返回 HTML 内容。

目前我的实现如下:

/**
 * TODO: REPLACE THIS FUNCTION WITH A DYNAMIC TEMPLATE
 */
suggest(value:any) {
   return $("<div>name: " + value.name + "</div>");
}

我想用使用 ng-template 的实现替换这个实现。我可以使用 *ngTemplateOutlet 呈现模板，但我不知道如何动态地进行呈现以便返回 HTML。

我的问题是:

How do I load up the #hint ng-template, bind the value to it, and return the rendered HTML to typeahead.js in my suggest function.

Answer 1

您可以使用TemplateRef::createEmbeddedView 方法创建嵌入式 View ，然后获取 DOM 节点以作为模板传递给 typeahead:

parent.html

<type-head>
    <ng-template #hint let-hint="hint">
       <div>name: {{hint.name}}</div>
    </ng-template>
</type-head> 

component.ts

@ContentChild(TemplateRef) templateRef: TemplateRef<any>;

suggest(value:any) {
  const embeddedView = this.templateRef.createEmbeddedView({ hint: value });
  embeddedView.detectChanges();
  this.embeddedViews.push(embeddedView);
  return embeddedView.rootNodes[1];
}

Plunker Example