<ng-select>:MouseEvent.target.select() 在火 element.nativeElement.click() 时不起作用

Question

我不明白为什么使用鼠标单击事件 ng-select 下拉输入文本被选中，但在执行 this.elementRef.nativeElement.click() 时却没有选中输入文本。()

1.working一个

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

2.Not 工作

constructor(public element:ElementRef){}

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

点击事件方法：

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

任何帮助。

谢谢。

Answer 1

参数 $event 是 MouseEvent 并且 onClick 方法是在您单击下拉菜单之后调用的，而不是在此之前。

要完成的更改：

1.Add id, local ref and open event handler function.

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

2.Use ViewChild 获取元素引用。

@ViewChild('element') element;

3.code 在 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.Add 低于 css Refer Custom styles section of 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 ;
}

You can find working code snippet here

<ng-select>:MouseEvent.target.select() 在火 element.nativeElement.click() 时不起作用

<ng-select>:MouseEvent.target.select() is not working when fire element.nativeElement.click()

javascript

angular-ngselect

angular