0

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

拖放工作。

我现在正在尝试处理单击，以具有与input type="file".

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

我可以创建元素，但我不能转发点击它。

如何访问 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
}

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

4

1 回答 1

2

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

于 2019-05-18T18:01:55.007 回答