存储使用 renderer2 创建的 nativeElement 的引用

Question

我正在尝试实现拖放指令。

拖放有效。

我正在尝试处理点击，以获得与 input type="file".

相同的行为

我的计划是使用 Renderer2 添加一个不可见的 <input>，并在我收到对主机的点击时转发点击。

我可以正常创建元素，但无法转发对它的点击。

如何访问 nativeElement 以便转发对它的点击并对 fileChange 事件做出反应？

这是我尝试过的：

ngOnInit(): void {
    // was using this.document.createElement... edited
    this.fileInput = this.renderer.createElement('input'); // What do I even get here ? Seems like a string
    this.renderer.setStyle(this.fileInput, 'visibility', 'collapse');
    this.renderer.setStyle(this.fileInput, 'position', 'absolute');
    this.renderer.setAttribute(this.fileInput, 'type', 'file');
    this.renderer.appendChild(this.elementRef.nativeElement, this.fileInput);
}

@HostListener('click', ['$event'])
public onClick(evt) {
    console.log('this.fileInput', this.fileInput); // alright
    console.log('this.fileInput.nativeElement', this.fileInput.nativeElement); // undefined
    console.log('this.fileInput.el.nativeElement', this.fileInput.el.nativeElement); // undefined has no nativeElement
}

注意，我隐藏了输入，因为指令不能与主机布局交互，但当我显示它时，它工作正常（点击它工作）。

Answer 1

首先，您应该使用 Renderer2 的 createElement 方法，您已经在其他地方使用了它。该方法，以及文档的 createElement，returns 一个元素，而不是一个 elementRef。这就是为什么试图访问 this.fileInput returns undefined 的 nativeElement，this.fileInput 已经是 nativeElement.

存储使用 renderer2 创建的 nativeElement 的引用

Store reference of nativeElement created with renderer2

dom

angular

angular-renderer2