访问TemplateRef会在Angular2中提供一个空注释节点

Question

在Angular2中构建自定义排序组件，但我无法访问模板变量。我需要能够访问ng-template，以便我可以“克隆/标记”然后根据提供的模板创建放置区域。

我尝试过使用@ViewChild("dropzone")，但它也会返回一个空注释节点。

这是组件

@Component({
    selector: "my-sortable",
    template: `
        <ng-content select="my-sortable-content"></ng-content>
    `
})
export class SortableComponent implements AfterViewInit {

    @Input() //@ContentChild("dropzone")
    dzTemplate: any;

    onAfterViewInit() {
        // Outputs an object but the 
        // nativeElement is an empty 
        // comment node
        console.log(this.dzTemplate); 
    }
}

这是HTML

<my-sortable [dzTemplate]="dropzone">
    <ng-template #dropzone>
        <p>Hey, I'm a drop zone!!</p>
    </ng-template>
    <my-sortable-content>
        <div *ngFor="...">
            ...
        </div>
    </my-sortable-content>
</my-sortable>

Answer 1

我需要做类似的事情，最后需要使用角度核心的forwardRef

import { Component, AfterViewInit, ViewChild, forwardRef } from '@angular/core';

/* ... in component somewhere */
  @ViewChild(forwardRef(() => SomeComponent)) // You can use a DI token I believe
  private paginationControls: SomeComponent;

虽然任何类型都可能很棘手，但请试一试！ ：D你可能也需要使用injection tokens - 但我不确定......

如果您需要根据模板的类型更改行为，那么使用静态类型和切换动态字符串或其他内容会更好。我已经构建了componentID的地图 - ＆gt;之前和之后使用ComponentFactoryResolver实例化新组件的组件类型 - 它有点痛苦，因为您需要列出所有案例，但是如果您需要深入了解组件中的组件的详细信息分拣机组件，那么你必须这样做（如果forwardRef最终不起作用）。

Answer 2

找到解决方案。事实证明，ElementRef对象的方法createEmbeddedView()将返回EmbeddedViewRef。从那里，我可以访问rootNodes属性中的DOM元素。这些节点尚未附加到任何元素，因此它们非常适合克隆/标记。