Директива Angular2 прослушивает обратные вызовы или изменения родительского компонента

У меня есть директива 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]
}

Все работало нормально, пока я не добавил модуль выбора даты (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
    }

Нижняя линия.

Я открыт для любых подсказок или решений о том, как подключить директиву к переменным и обратным вызовам родительских элементов. Я понимаю, что это довольно общий вопрос, но, может быть, кто-то может указать мне правильное направление здесь.


angular angular-components angular-directive angular2-template
person Karl Johan Vallner    schedule 23.06.2017    source источник
comment
извините, вы можете сказать в одной строке, что вы хотите. Что вы хотите делать с событиями средства выбора данных   -  person Vamshi    schedule 23.06.2017
comment
Директива подключается к элементу DOM или некоторому компоненту. Я хочу иметь возможность подписываться на изменения атрибутов этого элемента или компонента ИЛИ иметь возможность подключаться к обратным вызовам этого компонента.   -  person Karl Johan Vallner    schedule 24.06.2017
comment
Вы пробовали @HostListener('dateChanged') ?   -  person Vamshi    schedule 24.06.2017
comment
Благодарю вас! Это было так просто. Как-то я не наткнулся на это решение. Я думал, что обратные вызовы были сделаны для определенной функции, если она существовала, а не для запуска события. Я мог бы отметить вас как ответ, если вы создадите его. Вы также случайно не знаете, могу ли я также подписаться на изменение значения на входе?   -  person Karl Johan Vallner    schedule 24.06.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете прослушивать событие, отправленное input . В случае даты это dateChanged , в случае обычного ввода это change .

Без директивы вы можете просто сказать

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

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

Если у вас есть это в директиве, вы можете добавить к ней HostListener.

@HostListener('dateChanged') dateChange() {
     //  do something  
}
person Vamshi    schedule 24.06.2017
comment
Поскольку я могу просить об улучшениях, я хотел бы знать, может ли директива подписаться на изменения атрибутов родительских элементов DOM? Возможно ли это, и, возможно, вы также можете написать об этом в своем ответе. Это действительно было бы полезным знанием. - person Karl Johan Vallner; 24.06.2017