Angular2 指令监听 parent 组件回调或更改

Question

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

@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]
}

一切正常，直到我在节目中引入了日期选择器模块 (https://github.com/kekeh/mydatepicker)。此模块创建一个新组件，其中 children 之一是输入，整个组件让我选择一个日期。

我想在这里实现的目标：

我想重写我的指令以监听日期选择器的回调或订阅（我正在使用 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
    }

底线。

我愿意接受有关如何将指令挂接到 parent 元素变量和回调的任何线索或解决方案。我知道这是一个非常笼统的问题，但也许有人可以在这里为我指明正确的方向。

Answer 1

您可以收听输入发送的事件。在日期的情况下是 dateChanged ，在常规输入的情况下是 change 。

没有指令你可以直接说

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

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

如果你在指令中有它，你可以添加 HostListener 到它。

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

Angular2 指令监听 parent 组件回调或更改

Angular2 directive listen to parent component callbacks or changes

angular-directive

angular2-template

angular-components

angular