<ng-select>：MouseEvent.target.select（）在触发element.nativeElement.click（）时不起作用

Question

我不明白为什么使用mouseclick事件882 下拉输入文本会被选中，但是在执行ng-select时却没有选择输入文本。（）

1。工作一个

this.elementRef.nativeElement.click()

2。不工作

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

点击事件方法：

constructor(public element:ElementRef){}

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

任何帮助。

谢谢。

Answer 1

参数$event是MouseEvent，在您单击下拉菜单之前（而不是之前）调用onClick方法。

要完成的更改：

1。添加id，本地引用和打开事件处理函数。

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

2。使用ViewChild获取元素引用。

@ViewChild('element') element;

在triggetClickEvent()和onOpen()函数中的3.code。

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 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