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是我使用的指南。我也看了一个关于这个的复数课程但是其他一切似乎都运行良好。有人能指出我正确的方向吗？如果我没有找几个小时，我就不会在这里......

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

Answer 1

问题在于我宣称＆＃39;主application.module中的指令，而不是使用它的指令。我仍然不明白为什么每个模块必须声明它将使用的指令，而不是在主模块中声明它们一次。

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

1 个答案: