动态实例化一个 ng-template 并在 Angular 5 中创建 HTML答案

【问题标题】：dynamically instantiate an ng-template and create HTML in angular 5动态实例化一个 ng-template 并在 Angular 5 中创建 HTML
【发布时间】：2018-02-28 01:52:52
【问题描述】：

我正在尝试构建一个 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。

我的问题是：

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

【问题讨论】：

如果无法完成，我会很高兴这是不可能的答案。需要更多信息吗？
这是一个想法plnkr.co/edit/6ORQnc?p=preview 但是你需要关心如何处理模板
太棒了，虽然我担心你的警告......正在处理......但感谢你的提示，这让我更接近......也许我可以获得渲染组件的 outerHtml ( embeddedView)，并在立即处理后返回。
@yurzui 我注意到每次创建嵌入视图时，vcRef 在_embeddedViews 数组中包含越来越多的元素；这完全有道理。你知道如何清除所有附加到vcRef 的嵌入视图，或者重新创建vcRef 以便它被垃圾收集吗？
我可以在每次创建新视图时转储所有先前创建的视图。

标签： javascript angular typescript

【解决方案1】：

你可以使用TemplateRef::createEmbeddedView方法创建内嵌视图，然后获取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

【讨论】：

但它仍然要求您将这个ng-template 挂在html 中的某个位置。如果我想要一个指令，其唯一职责是创建 ng 模板并将其提供给它的@Host()，该怎么办？