Question

在以下链接的自定义结构指令示例中，TemplateRef和ViewContainerRef指向什么？

https://angular.io/guide/structural-directives#unless

指令通常没有视图。那么templateRef会指向附加指令的HTML标签或Component吗？例如，在以下代码中，模板是<p> ...</p>之间的所有内容？我读到*转换为<ng-template>所以可能就是这种情况。

<p *myUnless="condition">Show this sentence unless the condition is true.</p>

示例中的ViewContainerRef是什么？通常我会添加一个<ng-container>作为视图容器？它来自示例中的哪个位置？

Answer 1

这个例子

<p *myUnless="condition">Show this sentence unless the condition is true.</p>

由编译器转换为

<ng-template [myUnless]="condition">
   <p>Show this sentence unless the condition is true.</p>
<ng-template>

因此，您现在可以看到myUnless指令放在ng-template元素上，这就是为什么它可以访问templateRef

因此，templateRef指向HTML标记或Component指令附在？

它＆＃34;有点＆＃34;指向指令附加到的ng-template元素的内容。在引擎盖下，它引用了为ng-template内容创建的嵌入式视图定义。

示例中的ViewContainerRef是什么？

任何HTML元素都可以充当视图容器。因此，在这种情况下，指令会注入引用指令主机元素的视图容器。

ng-template元素呈现为注释DOM节点，因此您会看到ViewContaineRef和TemplateRef都指向此注释节点：

export class MyUnless {
  constructor(t: TemplateRef<any>, vc: ViewContainerRef) {
    console.log(t.elementRef.nativeElement.nodeName); // #comment
    console.log(t.elementRef.nativeElement === vc.element.nativeElement); // true
  }
}

Angular2文档中的自定义结构指令

1 个答案: