无法绑定到 DIRECTIVE，因为它不是元素 Angular AOT 的已知属性

Question

我一直在努力解决我的问题，但无济于事。

.html:

<li [myHighlight]="color" defaultColor="violet" routerLinkActive="active"><a [routerLink]="['user']">Users <span class="sr-only" >(current)</span></a></li>

指令：

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

@Directive({
    selector: '[myHighlight]'
})
export class HighlightDirective {

    constructor(private el: ElementRef) { }

    @Input() defaultColor: string;

    @Input('myHighlight') highlightColor: string;

@HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || this.defaultColor || 'red');
}

@HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
}
    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

app.module:

import { PermissionsDirective, HighlightDirective } from "./shared/directives/permisions.directive";

    @NgModule({
        imports: [
          ..
        ],
        declarations: [
            ..
            HighlightDirective,
            ..
        ],
        bootstrap: [
            ApplicationComponent,
        ],
        providers: [
            ..
        ]
    })
    export class AppModule { }

我得到的错误：

Can't bind to 'myHighlight' since it isn't a known property of 'li'.

我正在使用具有这些设置的 AOT 编译器：

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors": true,
        "skipLibCheck": true,
        "lib": [
            "es2015",
            "dom"
        ]
    },
    "files": [
          .. all the good stuff ..
    ],
    "angularCompilerOptions": {
        "genDir": "aot",
        "skipMetadataEmit": true
    },
    "compileOnSave": true,
    "buildOnSave": true
}

我的猜测是，由于 AOT 编译器，我应该以不同于指南中的方式定义指令。 This 是我使用的指南。我还观看了关于此的 pluralsight 课程，但其他人似乎运行一切都很好。有人能指出我正确的方向吗？如果我没有找几个小时我就不会在这里...

编辑：为什么它认为 'myHighlight' 是 "li" 的属性而 'routerLinkActive' 是（我希望）路由器的属性指令？

Answer 1

问题是我 'declared' 主 application.module 中的指令而不是使用它的指令。我仍然不明白为什么每个模块都必须声明自己将要使用的指令，而不是在主模块中声明一次。

无法绑定到 DIRECTIVE，因为它不是元素 Angular AOT 的已知属性

Can't bind to DIRECTIVE since it isn't a known property of element Angular AOT

angular2-directives

angular2-aot

angular

无法绑定到 DIRECTIVE，因为它不是元素 Angular AOT 的已知 属性

Can't bind to DIRECTIVE since it isn't a known property of element Angular AOT

angular2-directives

angular2-aot

angular

无法绑定到 DIRECTIVE，因为它不是元素 Angular AOT 的已知属性