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

Question

使用angular 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>

Answer 1

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>