0

我正在使用 Ionic 4/Angular 7/Angular Material 7 开发应用程序。

在屏幕上有一个步进器。

每个步进器内部都有复杂的形式。鉴于它的复杂性，我将这个表单放在组件中。

在第二步里面有一个广播组。当我打开第二步时，我可以使用键盘将焦点设置在收音机上，但无法选择单选按钮。单选按钮周围有一个灰色圆圈，但不是选择的颜色。

第一步还有一个无线电组，在初始状态下，我可以使用键盘选择它。但是，如果我打开第二步并再次打开第一步，则单选按钮也无法选择。

我已经模拟了步进器内部没有组件的情况，但我无法以这种方式重现问题。然后我推断问题是由该步骤打开后的步骤内部的组件引起的。

如何才能正确选择步骤内的单选按钮？

4

1 回答 1

0

通过指令姑息解决：

import { Directive, HostListener } from '@angular/core';
import { MatRadioButton } from '@angular/material';

@Directive({
    selector: 'mat-radio-button'
})
export class MatRadioCorrectionDirective {

    constructor(private host:MatRadioButton) { }

    @HostListener('keyup', ['$event'])
    onKeyup(event: KeyboardEvent) {
        // console.log(event);

        if(
               event.keyCode == 38 // arrow up
            || event.keyCode == 40 // arrow down
            || event.keyCode == 37 // arrow left
            || event.keyCode == 39 // arrow right        
        ) {         
            event.preventDefault();              
            this.host.checked = true;
            // TODO: send event
            this.host.change.emit(null);
            // setTimeout(() => {
            // }, 500);
        }
    }
}
于 2019-02-03T22:14:24.107 回答