如何使用tab键使用Angular在同一页面中的不同子组件之间导航

Question

由于可访问性的原因，所有组件都可以使用tab键导航。我在登录页面上有两个组件，但选项卡不会将焦点从上面的组件转移到下面的组件。

<div class="content">
<login-form
[formBuilder]="fb"
[submitting]="loginPageState.submitting"
></login-form>
<div
*ngIf="pageData.appSettings"
class="login-page__link"
[innerHtml]="pageData.appSettings.login_page_link | safe: 'html'"
></div>
<login-identity
(identity)="onIdentity($event)">
</login-identity>
</div>

Answer 1

尝试将tabindex属性添加到组件中：https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/tabindex

对于您的组件可以这样使用：

<login-identity
tabindex=3
(identity)="onIdentity($event)">
</login-identity>  

或者类似：在组件ts文件中：

@Component({
selector: 'login-identity',
...
host: {
'tabindex': 3
},
})
export class LoginIdentityComponent