Невозможно создать пользовательскую директиву для гиперссылки в Angular

Question

Я выполнил все шаги, упомянутые в Создание пользовательской директивы об отказе от нажатия в Angular и попытался использовать эту пользовательскую директиву для гиперссылки, как показано ниже:

directive.ts:

import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } 
    from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Directive({
    selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
    @Input() debounceTime = 500;
    @Output() debounceClick = new EventEmitter();
    private clicks = new Subject();
    private subscription: Subscription;

    constructor() { }

    ngOnInit() {
        this.subscription = this.clicks.pipe(
            debounceTime(this.debounceTime)
        ).subscribe(e => this.debounceClick.emit(e));
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

    @HostListener('click', ['$event'])
    clickEvent(event) {
        event.preventDefault();
        event.stopPropagation();
        this.clicks.next(event);
    }
}

1012 *
*

.html

<a appDebounceClick (debounceClick)="delete()" [debounceTime]="700"></a>

Я также делаю необходимые определения импорта в app.module.ts и my-component.ts. Но при отладке я сталкиваюсь с " Невозможно связать с" debounceTime ", так как это не известное свойство ошибки" a "" . Нужно ли определять пользовательское событие щелчка в директиве? Если так, то как?

Answer 1

если вы создаете директиву в модуле, отличном от app.module, вам также необходимо добавить класс директивы в раздел экспорта этого модуля-декоратора, чтобы убедиться, что он доступен вне модуля

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ DebounceClickDirective ], 
  exports:[ DebounceClickDirective ], // ?

})
export class CustomesModule { }

app.template.html

<a appDebounceClick (debounceClick)="delete()" [debounceTime]="700" >click me ? </a>

демо ??