Question

我目前正在努力根据official Angular styleguide通过 HostListener 和 HostBinding 替换主机元数据。起点如下：我有一个从ng bootstrap superclass ngCheckBox继承的自定义指令。在使用主机元数据的旧拼写中，一切都很顺利。但是如果我现在尝试切换到新的最佳实践，我会收到错误消息：

Cannot read property 'target' of undefined
    at CustomCheckBoxDirective.NgbCheckBox.onInputChange

我怀疑我错误地使用了装饰器HostListener。

如何正确使用HostListener来访问超类函数？

带有主机元数据的

CustomDirective：

@Directive({
  selector: '[customButton][type=checkbox]',
  host: {        
    '(change)': 'onInputChange($event)'        
  },
  providers: [CUSTOM_CHECKBOX_CONTROL_VALUE_ACCESSOR]
})
export class CustomCheckBoxDirective extends NgbCheckBox {
  constructor(private myLabel: CustomButtonLabelDirective) {
    super(myLabel);
  }
}

带有HostBinding / HostListener的

CustomDirective：

@Directive({
  selector: '[customButton][type=checkbox]',
  providers: [CUSTOM_CHECKBOX_CONTROL_VALUE_ACCESSOR]
})
export class CustomCheckBoxDirective extends NgbCheckBox {      
  @HostListener('change') changeListener($event: any) {
    this.onInputChange($event);
  }      


  constructor(private myLabel: CustomButtonLabelDirective) {
    super(myLabel);
  }

NgbCheckBox超类：

export declare class NgbCheckBox implements ControlValueAccessor {       
    // ...
    onInputChange($event: any): void;
    // ...
}

Answer 1

你必须告诉angular传递这样的事件对象，否则，没有传递任何东西，这意味着你的参数假定undefined为其值

@HostListener('change', ['$event'])
changeListener(event: any) {
    this.onInputChange(event);
}

如何正确使用HostListener装饰器来调用超类函数？

1 个答案: