angular templateRef nativeElement 是一个空注释而不是原始元素 [英] angular templateRef nativeElement is an empty comment instead of original element

问题描述

我正在开发一个角度指令，将下拉列表转换为 radioListbox.这是我的初始代码:

import { Directive, Input, TemplateRef, ViewContainerRef,OnInit } from '@angular/core';@指示({选择器:'[radioList]'})导出类 RadioListDirective 实现 OnInit {构造函数(私有 templateRef:TemplateRef
解决方案
Hacky 解决方案目前有效:
抓住下一个兄弟:
this.templateRef.elementRef.nativeElement.nextSibling
使用 viewContainerRef.get
(this.viewContainerRef.get(0) as any).rootNodes[0]
(注意，从您的示例代码中，您使用了 vcRef 而不是我在此处使用的 viewContainerRef.)
I am developing an angular directive that converts dropdownlist to radioListbox.
here is my initial code :
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);

  }
}
and 
<div>
  test
</div>


<select *radioList><option>1</option><option>2</option></select>
It should log the TemplateRef whose ElementRef 's nativeElement is a select. But the result is and empty comment that its next element is the select .

解决方案
Hacky solutions currently working:

Grab the next sibling:

this.templateRef.elementRef.nativeElement.nextSibling


Use viewContainerRef.get

(this.viewContainerRef.get(0) as any).rootNodes[0]
(Note, from your example code you used vcRef instead of viewContainerRef as I used here.)

                        
这篇关于angular templateRef nativeElement 是一个空注释而不是原始元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！