在Angle dart中，如何使上/下箭头键在列表中导航？

问题描述

使用角镖，我有一个带有基本列表的材质对话框。当对话框显示时，我希望最终用户能够使用箭头键（上/下）浏览列表。

<modal *ngIf="visible" [visible]="visible">
    <material-dialog headered class="headered-dialog">
        <div header>
            <h1>List Demo</h1>
        </div>

        <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
            <div class="list-body form-control">
                <ul>
                    <li *ngFor="let item of items; let i=index">
                        <div>{{item.name}}</div>
                    </li>
                </ul>
            </div>
        </form>

    </material-dialog>
</modal>

解决方法

package：angular_components提供MaterialListComponent和FocusListDirective支持上/下导航

https://dart-lang.github.io/angular_components/#/material_list

您可以按照以下说明一起使用它们

<material-list focusList>
  <material-list-item *ngFor="let item of items; let i=index">
    <div>{{item.name}}</div>
  </material-list-item>
</material-list>

从未尝试过，但是您也应该可以在任何元素上使用FocusListDirective。

<ul focusList>
  <li *ngFor="let item of items; let i=index">
    <div>{{item.name}}</div>
  </li>
</ul>