Передать элемент ng-template в директиву - PullRequest
Новая
       18

Передать элемент ng-template в директиву

0 голосов
/ 17 мая 2019

Я пытаюсь передать 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)
  }
}

Но это просто показывает <!-- -->. Как мне получить доступ к содержимому шаблона? Похоже, что ни одно из других свойств не имеет его - в комментариях к этот вопрос предлагается использовать вместо него templateRef, но оно не определено.

Stackblitz при необходимости.

Для пояснения конечная цель директивы состоит в том, чтобы условно добавить содержимое шаблона к его родительскому элементу (вместе с некоторыми другими изменениями).

1 Ответ

0 голосов
/ 17 мая 2019

Как вы можете видеть в angular.io :

ng-template является угловым элементом для рендеринга HTML. Он никогда не отображается напрямую. Фактически, перед рендерингом представления Angular заменяет шаблон ng и его содержимое комментарием.

Так что во время выполнения ng-template это просто комментарий. Он не может быть воспроизведен как DOM, и его невозможно получить как тип ElementRef.

Но если вы хотите отправить, например, элемент p в вашу директиву, это возможно. Я изменил твой код, чтобы сделать это. Посмотрите этот проект stackblitz:

[https://stackblitz.com]

...