: MouseEvent.target.select () не работает, когда fire element.nativeElement.click () - PullRequest
Новая
       84

: MouseEvent.target.select () не работает, когда fire element.nativeElement.click ()

0 голосов
/ 30 мая 2020

Я не понимаю, почему с событием mouseclick ng-select текст ввода раскрывающегося списка выбирается, но при выполнении this.elementRef.nativeElement.click() не получается выбранный текст ввода. (image)

1 . рабочий 

<ng-select (click)="onClick($event)"></ng-select>

2. Не работает 

constructor(public element:ElementRef){}

triggetClickEvent(){
   this.element.nativeElement.click();
}

метод события щелчка: 

onClick($event){
   $event.target.select();//while triggetClickEvent exception:$event.target.select is not a function
}

Любая помощь.

Спасибо.

1 Ответ

1 голос
/ 30 мая 2020

Аргумент $event - это MouseEvent, а метод onClick вызывается после того, как вы щелкнете раскрывающийся список, но не до этого.

Изменения, которые необходимо сделать:

1. Добавьте идентификатор, локальная ссылка и функция-обработчик событий открытия. 

<ng-select id="element" #element (open)="onOpen()"...></ng-select>

2. Используйте ViewChild, чтобы получить ссылку на элемент. 

@ViewChild('element') element;

3. код внутри функций triggetClickEvent() и onOpen(). 

triggetClickEvent(){
   let el = document.getElementById("element");
   el.classList.add("customCSSClass");
   this.element.focus();
}

onOpen() {
    let el = document.getElementById("element");
    el.classList.remove("customCSSClass");
}

Примечание: я знаю, что прямой доступ к DOM - не лучшая практика, и я попытался использовать Renderer2, но событие focus каким-то образом не работает с ним.

3. Добавьте ниже css См. Раздел «Пользовательские стили» в ng-select 

.ng-select.ng-select-focused.customCSSClass  ::ng-deep .ng-value { 
    background-color: blue;
}
.ng-select.ng-select-focused.customCSSClass ::ng-deep .ng-placeholder { 
    background-color: blue ;
}

Здесь вы можете найти рабочий фрагмент кода

...