无法在 Angular 中为超链接创建自定义点击指令答案

【问题标题】：Cannot create a custom click Directive for Hyperlink in Angular无法在 Angular 中为超链接创建自定义点击指令
【发布时间】：2019-11-07 05:23:59
【问题描述】：

我已按照Creating a Custom Debounce Click Directive in 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);
    }
}

.html:

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

我还在 app.module.ts 和 my-component.ts 中做了必要的导入定义。但是在调试它时，我遇到了“Can't bind to 'debounceTime' because it is not a known property of 'a'” 错误。我需要在指令中定义自定义点击事件吗？如果有怎么办？

【问题讨论】：

“无法绑定到 'debounceTime'，因为它不是 'a' 的已知属性”听起来很可疑，就像您没有将指令添加到模块中，因此它没有被导入。
Can't bind to 'debounceTime' since it isn't a known property of 'a' 表示您在链接上应用的[debounceTime] 输入无法识别。 Seems like your code osn't the issue，所以请提供一个minimal reproducible example。
@SargoDarya 不是这样，错误非常具体，来自误用的 @Input 语法，例如 [debounceTime]="500"
@Maryannah 好吧，它可能无法被识别，因为缺少指令的导入。这通常是您尝试将某些内容传递给未注册的输入时遇到的错误，可能是由于模块中缺少导入。为了清楚起见，从可用代码来看，这是声明中缺少它的唯一可能性，并且模块是唯一未在此处发布的内容。提到的教程也没有提到这是必要的。

标签： javascript angular typescript angular-directive

【解决方案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>

demo ??

【讨论】：

考虑支持解释它的评论，而不是发布答案。另外，这不是问题。
@Maryannah 用户已经说它已经导入然后在测试他的代码后在我看来他忘记将指令类添加到导出部分
嗯，在您看来，但事实并非如此。尝试重现问题，您会亲眼看到。
@Maryannah 这是他的代码演示库stackblitz.com/edit/angular-5hky9b?
不，你是对的，实际上可能是这样。对不起，我对那个不好！我在解释为什么不能，在解释过程中，我注意到这个问题与我自己发布的问题非常相似。改为支持您的答案！