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

Question

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

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
}

任何帮助。

谢谢。

Answer 1

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

要做的改变：

1.添加id、local ref和open事件处理器function。

<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的自定义styles部分

.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 ;
}

你可以在这里找到工作代码片段