如果点击，Angular2滚动我自己的下拉隐藏？-Java 学习之路

我有一个 div ，我想要显示/隐藏 input 的焦点/模糊 . 这里's a simplified version of what I' m尝试：

<input (focus)="ShowDropDown=true;" (blur)="ShowDropDown=false;" />
<div *ngIf="ShowDropDown">
  <ul>
    <li (click)="...">...</li>
    <li (click)="...">...</li>
    <li (click)="...">...</li>
  </ul>
</div>

div 包含要单击的元素列表 . 我的问题是 input 的模糊发生在 li 点击之前 .

我想保持简单 . 我没有't want to set everything'的焦点或点击事件来设置 ShowDropDown=false 但我需要保持下拉div打开以进行交互 .

我可以 ShowDropDown 是一个数字，其中聚焦增加1，鼠标在div上添加另外1，模糊输入减去1，鼠标除去div减去1但我想这可能很容易失去同步 .

有更简单的方法吗？点击后我可以强制模糊运行吗？

3 回答

7
我在this question找到了答案：mousedown将在模糊之前发生，但点击将在之后发生 . 我只是改为
```
<input (focus)="ShowDropDown=true;" (blur)="ShowDropDown=false;" />
<div *ngIf="ShowDropDown">
  <ul>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
  </ul>
</div>
```
这给了我想要的事件的顺序，没有做延迟或鼠标是“引用计数”或者向DOM中的其他所有内容添加点击事件 .
回复于 2024-05-02T12:09:31+08:00

Update

听取全球事件的更好方法是

@Comonent({...
  host: {'(window:click)': 'clickHandler()'}
})

Original

只需检查点击是否在您的下拉列表内部或外部：

import {DOM} from angular2/platform/common_dom;

constructor(private elementRef: ElementRef) {
  DOM.getGlobalEventTarget('window')
     .addEventListener('click', (event) => {
       // check if event.target is a child of elementRef.nativeElement
       // if not hide the dialog
     });
}

我目前无法在TS中完成这项工作，尽管 DOM 始终未定义 .
这在Dart中运行良好 .
Plunker

我创建了一个问题https://github.com/angular/angular/issues/6904

回复于 2024-05-02T12:09:31+08:00

我能想到像这样的简单黑客

<input (focus)="ShowDropDown=true;" (blur)="ShowDropDown=false;" />
 <div *ngIf="ShowDropDown">
   <ul>
     <li (click)="...; ShowDropDown = true">...</li>
     <li (click)="...; ShowDropDown = true">...</li>
     <li (click)="...; ShowDropDown = true">...</li>
   </ul>
 </div>

不是最优雅的解决方案，但应该工作

回复于 2024-05-02T12:09:31+08:00

如果点击，Angular2滚动我自己的下拉隐藏？

3 回答

相关问题