将 ng-template 元素传递给指令答案

【问题标题】：Pass a ng-template element to a directive将 ng-template 元素传递给指令
【发布时间】：2019-10-04 05:51:31
【问题描述】：

我正在尝试将 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 上的 cmets 建议改用 templateRef，但它是未定义的。

Stackblitz 如果需要。

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

【问题讨论】：

您应该将其用作*myTemplate 而不是[myTemplate]，这样结构指令就会收到您想要的内容。如果您尝试在内部使用模板，我建议您使用 @ContentChild 或某种形式。不发布作为答案，因为它不是
@FranciscoSantorelli 然后我得到“无法绑定到 'myTemplate'，因为它不是 'div' 的已知属性。”而@ContentChild 并没有做我想做的事，我希望模板是可重用的，所以它必须可以从指令外部访问。
我不确定你想达到什么目的。您是在尝试获取指令将注入的可重用模板（？），还是尝试将模板传递给指令？
@FranciscoSantorelli 该指令的最终目标是有条件地将模板的内容添加到其父元素（以及其他一些更改）。

标签： angular typescript angular2-template angular-directive

【解决方案1】：

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

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

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

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

https://stackblitz.com

【讨论】：

我知道它适用于常规元素，但我需要使用模板，因为我不希望它在父组件中呈现。如果无法使用模板进行操作，我可能只需要这样做并使用 CSS 来隐藏它或其他东西，但这并不理想。