Question

我的收音机输入有指令。我想听一下这个输入的检查和取消选中（通过检查其他无线电）隐含的事件。

我试图将此添加到我的指令中：

@HostListener('change') onChange(): void {
    console.log('change');
}

但是当我的输入取消选中时，不会触发更改事件。

有没有办法听取checked属性？如果没有，你有什么建议？

修改

以下是展示问题的plunker ...只有选定的广播应以红色显示

Answer 1

我的方法是：

将拥有单选按钮的FormControl注入指令。
在指令中，订阅控件的valueChanges observable，以便在控件的值更改时得到通知
每次更改值时，根据FormControl的新值是否与此特定单选按钮的值DOM属性匹配来设置或删除所需的CSS

修改后的模板

<input... selected [control]="form.get('checkbox')"...value='1'/>
<input... selected [control]="form.get('checkbox')"...value='2'/>

请注意，control属性属于该指令，我们将其绑定到我们感兴趣的FormControl的特定实例

修改了选定指令

@Directive({selector: 'input[selected]'})
export class Selected implements OnChanges {
    constructor(private element:ElementRef) {}

    //instance of FormControl this radio btn belongs to
    @Input() control:FormControl;

    //Once a FormControl is bound, start listening to its changes
    //Once a change occurs, call manageClass and provide it the new value
    ngOnChanges(){
        this.control.valueChanges.subscribe(newVal=>this.manageClass(newVal));
    }

    //Compares the new value to the "value" property of the DOM radio btn
    //If they match, it means the radio btn is currently selected. 
    // Add or remove the CSS class as appropriate
    manageClass(newVal){
        let e = this.element.nativeElement;
        if(e.value===newVal) e.parentElement.classList.add('selected');
        else e.parentElement.classList.remove('selected');
    }
}

Live Demo

听取指令中的uncheck事件

1 个答案: