Angular 2了解ViewContainerRef与TemplateRef的用法

Question

我正在 Angular2 中实现结构指令。 在文档中，我看到我需要注入TemplateRef来获取模板元素和ViewContainerRef。

class TestDirective {
   constructor( private templateRef : TemplateRef<any>, private viewContainer : ViewContainerRef ) {
     // this.viewContainer.createEmbeddedView(this.templateRef);
   }   
}

<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

在这种情况下，我不明白哪个元素是ViewContainerRef？

Answer 1

如果您注入ViewContainerRef，则该元素是TestDirective的主机元素。如果您使用@ViewChild(templateVarNameOrType)或@ContentChild(templateVarNameOrType)，那就是templateVarNameOrType匹配的元素。

您应该知道this.viewContainer.createEmbeddedView()或this.viewContainer.createComponent()会将元素或组件创建为元素ViewContainerRef所指向的兄弟元素，而不是像孩子一样期望的那样。