Question

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

component.html

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

directive.ts

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

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

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

但是它仅显示。如何访问模板的内容？其他属性似乎都没有它-对this question的评论建议改用templateRef，但未定义。

Stackblitz（如果需要）。

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

Answer 1

您在angular.io中可以看到：

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

因此在运行时，ng-template只是一个注释。它不能作为DOM渲染，也不可能作为ElementRef类型到达。

但是，如果您想将p元素发送到指令中，则可以。我更改了您的代码来做到这一点。请参见以下stackblitz项目：

[https://stackblitz.com]

将ng-template元素传递给指令

1 个答案: