Хранить ссылку на nativeElement, созданный с помощью renderer2 - PullRequest
Новая
       31

Хранить ссылку на nativeElement, созданный с помощью renderer2

0 голосов
/ 18 мая 2019

Я пытаюсь реализовать директиву перетаскивания.

Перетаскивание работает.

Я пытаюсь обработать щелчок сейчас, чтобы иметь то же поведение, что и с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
}

Обратите внимание, я скрываю ввод, потому что директива не должна взаимодействовать с компоновкой хоста, но когда я ее показываю, она работает нормально (щелчок по ней работает).

1 Ответ

1 голос
/ 18 мая 2019

Прежде всего, вы должны использовать метод createElement в Renderer2, вы уже используете его везде. Этот метод, как и createElement документа, возвращает элемент, а не elementRef. Вот почему при попытке доступа к nativeElement this.fileInput возвращается неопределенное значение, this.fileInput уже является nativeElement.

...