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返回一个元素，而不是elementRef。这就是为什么尝试访问this.fileInput的nativeElement返回未定义的原因，this.fileInput已经是nativeElement。

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

1 个答案: