使用*ngIf的Angular6 AutoFocus

Question

<div class="dropdownContainer" placeholder="test" (click)="ShowDropDown()"  />

<div #tref *ngIf="showDropDown == 1" class="dropdownList" (focusout)="HideDropDown()" style="border:1px solid black;" >this is my test</div>

单击dropDownContainer后，我希望dropdownList出现并将焦点放在上面。

我试过用

  @ViewChild("tref", {read: ElementRef}) tref: ElementRef; 

方法，但它返回未定义的元素，因为在单击上面的div之前，DOM中不存在该元素。如何自动聚焦于动态的非输入DOM对象？

编辑按建议更新我的代码，这仍然不会自动聚焦到div上。

  @ViewChild("tref") tref: ElementRef;
      ShowDropDown() {
      this.showDropDown = 1;
      this.tref.nativeElement.focus();
      console.log(this.tref);
  }
HideDropDown(){
  console.log('test out')
  this.showDropDown = 0;
}



<input   #tref class="dropdownContainer" placeholder="george" (click)="ShowDropDown()"  />
<div tabindex="-1" (focusout)="HideDropDown()" [hidden]="showDropDown == 0" class="dropdownList"  style="border:1px solid black;" >this is my test</div>

对问题的回答有两重答案。

1) DIVS除非有表索引，否则不能有焦点。堆叠应答

2)我需要包括setTimeout(() => this.tref.nativeElement.focus(), 1);，因为hidden元素还没有自动准备好接收焦点。

*ngIf和隐藏两者都起作用了，一旦我输入了上面的修复程序

清理代码

import { Component,  ElementRef , ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {

  constructor() {
  }

  showDropDown = 0;



  @ViewChild("tref") tref: ElementRef;
  ShowDropDown() {
this.showDropDown = 1;
setTimeout(() => this.tref.nativeElement.focus(), 1);
  }

HideDropDown(){
  this.showDropDown = 0;
}

test(){ console.log('works');}

}

<div tabindex="-2"    class="dropdownContainer" placeholder="george" (click)="ShowDropDown()"   ></div>
<div tabindex="-1" #tref [hidden]="showDropDown == 0" class="dropdownList"  style="border:1px solid black;" (click)="test()" (focusout)="HideDropDown()">this is my test</div>

Answer 1

在ViewChildren和QueryList.changes事件的帮助下，只要下拉元素变得可见，就可以将其聚焦。不管在视图中显示元素需要多长时间，这种技术都能工作。

在模板中，向下拉div提供一个div属性

<div class="dropdownContainer" (click)="showDropDown = true">
  Click here to show the dropdown
</div>

<div #dropDownDiv *ngIf="showDropDown" tabindex="1" class="dropdownList" (focusout)="showDropDown = false">
  This is the dropdown element
</div>

在代码中，使用ViewChildren检索下拉元素，并在ngAfterViewInit中设置QueryList.changes事件处理程序。当通知您元素已变得可见时，您可以将焦点设置在它上：

showDropDown = false;

@ViewChildren("dropDownDiv") private dropDownDivList: QueryList<ElementRef>;

ngAfterViewInit() {
  this.dropDownDivList.changes.subscribe((list: QueryList<ElementRef>) => {
    if (list.length > 0) {
      list.first.nativeElement.focus();
    }
  });
}

有关演示，请参见这一堆闪电战。

Answer 2

从*ngIf="showDropDown"更改为[hidden]="! showDropDown"，您应该能够在组件中使用@ViewChild并防止"undefiend“问题。

如果这样做仍然不起作用，则可以通过单击事件将元素传递给组件，方法是将单击更改为此(click)="ShowDropDown(tref)"。请注意，为了使其工作，您仍然需要将*ngIf更改为隐藏。

Answer 3

如果对两个元素使用公共容器，并在容器上设置焦点，则下拉列表将隐藏在任何单击中，包括单击下拉元素-而不必手动设置焦点。(注意，我们必须在父级上设置表索引)。

<div class="container" (focusout)="showDropDown = false" tabindex="0">
  <div class="dropdownContainer" (click)="showDropDown = true">
    Click here to show the dropdown
  </div>

  <div #dropDownDiv *ngIf="showDropDown" tabindex="1" class="dropdownList" >
    This is the dropdown element
  </div>
</div>

css：

.container:focus {
  outline: none;
}