角度材料 7：无法使用键盘正确选择组件内的单选按钮答案

【问题标题】：Angular material 7: Cannot correctly select radio buttons inside component using keyboad角度材料 7：无法使用键盘正确选择组件内的单选按钮
【发布时间】：2019-02-04 06:14:24
【问题描述】：

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

在屏幕中有一个步进器。

每个步进器内部都有复杂的表格。考虑到它的复杂性，我将这个表单放在组件中。

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

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

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

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

【问题讨论】：

分享一个例子 - 在 Stackblitz 或至少代码上。
我无法重现这个 o Stackblitz。

标签： radio-button components angular7 angular-material-7 mat-stepper

【解决方案1】：

通过指令姑息解决：

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);
        }
    }
}

【讨论】：