Question

我的div有ul＆gt; li，在ngIf执行下面的广告后显示。

<input type="text" />
<button (click)="ShowDropDown=true;">Show</button>
<div *ngIf="ShowDropDown">
  <ul>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
  </ul>
</div>

点击“显示”按钮后，我需要将注意力集中在ul＆gt; li的第一个元素上。

Answer 1

要设置对div，li等元素的关注，您需要为它们设置tabindex属性。以下是如何将焦点设置为按钮单击：

将您的组件html更改为：

<button (click)="showDropDown()">Show</button>
<div *ngIf="toggleDropDown">
  <ul>
    <li #firstLi tabindex="0">...</li>
    <li >...</li>
    <li >...</li>  
  </ul>
</div>

...并在您的组件类中：

toggleDropDown: boolean = false;
  @ViewChild('firstLi') firstLi:ElementRef;
  public showDropDown(){
      this.toggleDropDown=true
      setTimeout(()=>{
        this.firstLi.nativeElement.focus();
      },10);
  }

这是一个工作的掠夺者：DEMO

Answer 2

我已更新我的解决方案以使用getter / setter。我添加了@Faisal提到的tabindex。在模板中：

<button (click)="showDropDown=true;">Show</button>
<div #container>
<div *ngIf="showDropDown">
  <ul>
    <li tabindex="0" (mousedown)="select">1</li>
    <li (mousedown)="select">2</li>
    <li (mousedown)="select">3</li>
  </ul>
</div>
</div>

在组件中：

  private _showDropDown = false;

  get showDropDown () {
    return this._showDropDown;
  }

  set showDropDown (val) {
    this._showDropDown = val;
    this.focusOnFirstLi();
  }

  @ViewChild('container') myDiv;

  focusOnFirstLi () {
     var that = this;
     setTimeout(function () {
       that.myDiv.nativeElement.getElementsByTagName("li")[0].focus();
     }, 10);
  }

https://plnkr.co/edit/Dc3Eh35QX9kiHg3YsSBR?p=info

Answer 3

<input type="text" #myInput />
<button (click)="ShowDropDown=true;">Show</button>
<div *ngIf="ShowDropDown">
  {{ myInput.focus() }}
  <ul>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
  </ul>
</div>

将注意力集中在ngIf中的 {{myInput.focus（）}} 和输入中的 #myInput

在进行ngIf后，Angular 2将重点放在ul li上

3 个答案: