将 ng-template 元素传递给指令

Question

我正在尝试将 a 传递ng-template给我的指令，如下所示：

组件.html

<div myDirective [myTemplate]="myTemplate"></div>
<ng-template #myTemplate><p>Lorem ipsum dolor sit amet.</p></ng-template> 

指令.ts

import {Directive, Input} from "@angular/core"

@Directive({
  selector: "[myDirective]"
})
export class MyDirective {
  @Input() myTemplate

  ngOnInit () {
    console.log(this.myTemplate.elementRef.nativeElement)
  }
}

但这只是表明<!-- -->。如何访问模板的内容？其他属性似乎都没有它 - 关于这个问题的评论建议使用templateRef它，但它是未定义的。

如果需要的话，进行堆栈闪电战。

澄清一下，该指令的最终目标是有条件地将模板的内容添加到其父元素（以及一些其他更改）。

Answer 1

正如您在angular.io中看到的：

ng-template 是一个用于渲染 HTML 的 Angular 元素。它永远不会直接显示。事实上，在渲染视图之前，Angular 用注释替换了 ng-template 及其内容。

所以在运行时，ng-template只是一个注释。它不能作为 DOM 进行渲染，并且不可能以 ElementRef 类型来访问它。

但是，如果您想将 ap 元素发送到您的指令，这是可能的。我改变了你的代码来做到这一点。请参阅这个 stackblitz 项目：

https://stackblitz.com