4

我想实现一个名为“上传文件”的指令，该指令将应用于一个<button>元素。它的用法是：

<button upload-file> Upload a file </button>

该指令应该添加一个隐藏的<input>，当单击按钮时<input>，指令代码将单击该元素。生成的 DOM 将是：

<button upload-file>Upload a file</button>
<input type="file" #uploaderInputEl ng2FileSelect [uploader]="uploader" />

我尝试以<input>这种方式使用 Renderer2 创建元素：

  private appendInputElement = () => {
    this.inputElement = this._renderer.createElement('input');

    this._renderer.setAttribute(this.inputElement, "type", "file");
    this._renderer.setStyle(this.inputElement, "width", "0");
    this._renderer.setStyle(this.inputElement, "visibility", "hidden");

    this._renderer.setAttribute(this.inputElement, "accept", this.acceptedFileExtensions);
    this._renderer.listen(this.inputElement, "change", (event) => this.inputElement_change(event));

    // set directive: ng2FileSelect
    // set property binding: [uploader]="uploader"

    this._renderer.appendChild(this.containerElement, this.inputElement);
  }

但我不知道如何设置directive(ng2FileSelect) 和property binding([uploader]="uploader")。我知道它们是“角度功能”，与我使用设置的“事件绑定”（更改）相同_renderer.listen()。

有没有办法设置指令和属性绑定？

4

1 回答 1

1

不幸的是，角度不提供从代码动态设置指令

于 2020-05-28T21:54:07.673 回答