Angular 6指令错误-无法绑定到“ appClickEvent”，因为它不是“ button”的已知属性

Question

Created a module with a directive inside that will catch a click event from a button.

click.directive.ts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appClickEvent]'
})
export class ClickDirective {
  private el:any;
  constructor(
    private elem: ElementRef,
  ) {}

  @Input() appClickEvent: any;

  @HostListener('click', ['$event']) clickEvent(event:any) {
    console.log(this.appClickEvent) // {label: 'Foo'}
  }
}

Usage in a component

I want to get the data {label: 'Foo'} and pass it to the @HostListener in the click.directive.ts .

<button [appClickEvent]="{label: 'Foo'}">Click Foo</button>

my.module.ts

import { CommonModule } from '@angular/common';
import { ClickDirective } from './click.directive';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    ClickDirective
  ],
  declarations: [
    ClickDirective
  ]
})
@NgModule()
export class McAnalyticsModule {}

app.module.ts

// ... other modules
import { MyModule } from '@app/my/my.module';

@NgModule({
  imports: [
    // .. .other modules
    MyModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Error

Can't bind to 'appClickEvent' since it isn't a known property of 'button'. ("][appClickEvent]="{label: 'Foo'}">Foo")

Answer 1

Working Example

click.directive.ts:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appClickEvent]'
})
export class ClickDirective {
  private el:any;
  constructor(
    private elem: ElementRef,
  ) {}

  @Input() appClickEvent: any;

  @HostListener('click', ['$event']) clickEvent(event:any) {
    console.log("your output");
    console.log(this.appClickEvent)
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ClickDirective } from './click.directive';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent,ClickDirective ], exports: [ClickDirective],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

html:

<button appClickEvent="{label: 'Foo'}">Click Foo</button>

Answer 2

You should inject McAnalyticsModule in app.module.ts Not MyModule . So angular didn't find the McAnalyticsModule .

Include McAnalyticsModule in app.module.ts like this:

import { McAnalyticsModule } from '@app/my/my.module';     //<== Remove MyModule class 

@NgModule({
  imports: [
    // .. .other modules
    McAnalyticsModule,          //<== Remove MyModule class 
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is working example: Angular 6 Directive