Question

我有一个angular2 / 4指令，我附加到输入DOM元素，它为它们添加了一个类，标记它们不是空的。

@Directive({
    selector: '[inputNotEmptyAddClass]'
})
export class InputNotEmptyDirective implements OnInit {
...
@HostListener('change') onChange() {
        this.process();
    }
...
process() {
[Add class to parent input element, when it has a value]
}

一切正常，直到我向节目介绍了一个datepicker模块（https://github.com/kekeh/mydatepicker）。这个模块创建了一个新组件，其中一个子组件是一个输入，整个事件让我选择一个日期。

我想在这里实现的目标：

我想重写我的指令来监听日期选择器的回调或者订阅（我正在使用RXjS）一些日期选择器变量。然而，我对如何正确实现这一点缺乏想法。

我尝试了什么？

我发现使用ControlValueAccessor

constructor( @Inject(NG_VALUE_ACCESSOR) private _valueAccessor: ControlValueAccessor )

我可以检查一下，如果我的指令被挂钩的元素是日期选择器。

if ( this._valueAccessor[0].constructor.name == 'MyDatePicker' ) {

现在我可以看到它有onChange函数和所有变量，但我不知道如何订阅它们。

我也可以在我的指令中使用模块回调函数，但它们似乎没有触发。有没有办法让它们触发？

onDateChanged(event: IMyDateModel) {
        // event properties are: event.date, event.jsdate, event.formatted and event.epoc
    }

底线。

我对任何关于如何将指令挂钩到父元素变量和回调的线索或解决方案持开放态度。我知道这是一个非常通用的问题，但也许有人可以指出我在这里正确的方向。

Answer 1

您可以收听输入调度的事件。如果日期为dateChanged，则在常规输入时为change。

没有指令，你可以说

<input type="text" (change)="doSomething()" />

// (dateChanged)="doSomething()" in case of date

如果您在指令中使用它，则可以向其添加HostListener。

@HostListener('dateChanged') dateChange() {
     //  do something  
}

Angular2指令侦听父组件回调或更改

1 个答案: