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

【问题标题】：Angular 6 Directive Error - Can't bind to 'appClickEvent' since it isn't a known property of 'button'Angular 6 指令错误 - 无法绑定到“appClickEvent”，因为它不是“按钮”的已知属性
【发布时间】：2018-12-15 14:52:26
【问题描述】：

创建了一个带有指令的模块，该指令将捕获按钮的点击事件。

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'}
  }
}

在组件中的使用

我想获取数据{label: 'Foo'}并将其传递给click.directive.ts中的@HostListener。

<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 { }

错误

无法绑定到“appClickEvent”，因为它不是“按钮”的已知属性。 ("][appClickEvent]="{label: 'Foo'}">Foo")

【问题讨论】：

标签： angular angular-directive

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

【讨论】：

【解决方案2】：

您应该将McAnalyticsModule 注入app.module.ts 而不是MyModule。所以角度没有找到McAnalyticsModule。

在app.module.ts 中包含McAnalyticsModule，如下所示：

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 { }

这是工作示例：Angular 6 Directive

【讨论】：