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

Question

我试图建立一个typeahead.js组件用于角5.我有一个工作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。

我的问题是：

我如何加载#hint ng-template，将 绑定value到它，并将呈现的 HTML 返回到typeahead.js我的suggest函数中。

Answer 1

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

父.html

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

组件.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 示例