Question

我正在组件中使用带角度的离子型，并且试图在页面加载后以编程方式设置焦点。这是代码

item.component.html：

<ion-row>
         <ion-col col-5>
            <ion-item >
              <ion-label>Departure Port</ion-label>
              <ion-select #selected class="selector" formControlName="control"
                          [(ngModel)]="modelItem"
                          (click)="selectItem()">
                  <ion-option
                    *ngFor="let item of [{code:item.code, desc:item.desc}]"
                    value="{{item.code}}">
                    {{item.desc}} ({{item.code}})
                  </ion-option>
                </span>
              </ion-select>
            </ion-item>                
          </ion-col>
</ion-row>

item.component.ts

export class Item Component implements OnInit, AfterViewInit, AfterViewChecked {

 @ViewChild('selector')
  private selectorElRef: Select;

 public ngAfterViewInit(): void {
     this.portSelectorElRef.setFocus();
  }

我也尝试过这个：

 @ViewChild('selector')
  private selectorElRef: Select;

 public ngAfterViewInit(): void {
     this.portSelectorElRef.getElementRef().nativeElement.focus();
  }

这：

 @ViewChild('selector')
  private selectorElRef: Select;

 public ngAfterViewInit(): void {
     this.portSelectorElRef.getNativeElement.focus();
  }

variables.scss

*:focus {
  border: solid $primary-color 2px;
  box-shadow: 5px 10px 8px $primary-color;
}

以上都不是将焦点放在给定项目上。我试图在AfterViewInit和AfterViewChecked中设置焦点-相同的效果（无）。

轻按以设置焦点工作正常并且正在应用样式，但是我似乎无法以编程方式获得焦点。

Answer 1

所以也许您所想听到的不完全是，但我会尽力帮助以下方面：

浏览器对这种行为的支持是零散的：Safari和Chrome对它的工作方式具有不同的“策略”，并且说起来很简单-现代Safari仅希望最终用户进行显式交互才能将重点放在元素上，而Chrome应该可以让您做自己想做的事。
.focus方法本身仅适用于特定的标准网络元素：输入，按钮等

HTMLElement.focus（）方法将焦点设置为指定的元素（如果可以聚焦）。

来源：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

在您的情况下，您尝试将其应用到不幸的是没有可聚焦元素的离子选择离子选择。

查看此stackblitz并查看控制台，您将看到ion-select确实没有本地按钮元素（这是另一个使用“ span”和div等的组件）。

因此，从本质上讲，您正在尝试将焦点应用于不会以编程方式引起关注的元素。

如果您可以解释您要实现的UX，也许可以通过其他方式实现？

例如，您可以调用ion-select支持的.open（）方法来在加载时打开选择器：

https://stackblitz.com/edit/ionic-r8issn

您基本上可以从以下位置使用普通的API：https://ionicframework.com/docs/api/components/select/Select/#open

离子通过编程设置焦点

1 个答案: