angular templateRef nativeElement - пустой комментарий вместо исходного элемента

Question

Я разрабатываю угловую директиву, которая преобразует выпадающий список в radioListbox. вот мой начальный код:

import { Directive, Input, TemplateRef, ViewContainerRef,OnInit } from '@angular/core';

@Directive({
  selector: '[radioList]'
})
export class RadioListDirective implements OnInit  {



  constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) {

  }

  ngOnInit() {

    console.log(this.templateRef);
    this.vcRef.createEmbeddedView(this.templateRef);

  }
}

а также

<div>
  test
</div>


<select *radioList><option>1</option><option>2</option></select>

Это должно войти TemplateRef чья ElementRef родной элемент является select, Но результат и пустой комментарий, что его следующим элементом является select,

Answer 1

В настоящее время работают хакерские решения:

Хватай следующего брата:

this.templateRef.elementRef.nativeElement.nextSibling

Используйте viewContainerRef.get

(this.viewContainerRef.get(0) as any).rootNodes[0]

(Обратите внимание, из вашего примера кода вы использовали vcRef вместо viewContainerRef как я использовал здесь.)

Answer 2

Найдите ответ в пустом нативном элементе с помощью ng-template

ElementRef не имеет ничего общего сradioList, и это должен быть элемент комментария:

      <!---->

Это сохраненная функция, которая, если вы привязываете параметр директивы в качестве входных данных, так что

      <select *radioList="true"><option>1</option><option>2</option></select>

Тогда директива может иметь:

      @Input('radioList') isEnabled: boolean;

И визуализированные ElementRefnativeElementстановится:

      <!--bindings={
  "ng-reflect-is-enabled": "true"
}-->

Итак, в заключение, это ожидаемо.

Чтобы продолжить код,createEmbeddedViewсоздает контейнер для всего, что должно быть реализованоvcRef, поэтому вы можете внедрить cfResolver: ComponentFactoryResolver для разрешения, например, другого компонента шаблона:

      const cmpFactory = this.cfResolver.resolveComponentFactory(SomeOtherComponent);
this.vcRef.createComponent(cmpFactory);