Как установить привязку директивы и свойства для элемента, созданного с помощью Renderer2

Question

Я хочу реализовать директиву под названием «upload-file», которая будет применяться к элементу <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"). Я знаю, что это «angular функциональность» такая же, как «привязка событий» (изменение), которую я установил с помощью _renderer.listen().

Есть ли способ установить директиву и привязку свойств?

Answer 1

К сожалению, angular не позволяет устанавливать директиву динамически из кода