Angular: Dynami c Директивный впрыск не работает - PullRequest
0 голосов
/ 21 марта 2020

Я пытаюсь добавить ng2-file-upload в качестве пользовательской директивы без указания параметров в нескольких местах. Я решил создать директиву, которая может сделать это для меня, и я буду использовать ее в зависимости от сценария ios. Я не могу сделать эту работу.

Stackblitz: https://stackblitz.com/edit/angular-jopscg

Вот как я планирую назвать

<div>
  Attachments
  <input type="file" appAttachments [proxy]="proxy" name="fileInput" multiple #fileInput />
  <div>
    <mat-icon #proxy>attachment</mat-icon>
  </div>
</div>

В директиве

import { Directive, ElementRef, HostBinding, Renderer2, Input, OnInit } from '@angular/core';
import { FileUploader, FileSelectDirective } from 'ng2-file-upload';

@Directive({
  selector: '[appAttachments]'
})
export class AttachmentsDirective implements OnInit {
  @HostBinding('attr.ng2FileSelect')
  ng2FileSelect = new FileSelectDirective(this.el);

  @HostBinding('attr.uploader')
  uploader: FileUploader = new FileUploader({
    url: `/api/upload`,
    itemAlias: 'fileInput'
  });

  @HostBinding('style.display')
  display = 'none';



  fileHtml = `<input type="file" hidden name="fileInput" ng2FileSelect [uploader]="uploader" #fileInput multiple/>`;

  @Input()
  proxy: any = null;


  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
  ) {
    console.log(this.proxy)

    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
      this.uploader.uploadAll();
      console.log('hi')
    };
    this.uploader.onCompleteItem = (req: any, res: any) => {
      console.log(req, res);
    };
  }

  ngOnInit() {
    this.ng2FileSelect.uploader = this.uploader;
    this.ng2FileSelect.onChange();
    if (this.proxy) {
      this.renderer.listen(this.proxy._elementRef.nativeElement, 'click', (event) => {
        this.el.nativeElement.click();
      });
    }
  }

}

Реальная идея заключалась в том, чтобы использовать его следующим образом: добавить элемент файла в Dom, используя структурную директиву или что-то подобное.

<div>
  Attachments
  <!--inject file element dynamically-->
  <div>
    <mat-icon *appAttachments>attachment</mat-icon>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...