Javascript 在Angular 2中无法识别自定义指令

我创建了一个自定义指令，并将其添加到我的app.module声明中。但当我在我的组件中使用它时，它会给我一个错误：

属性绑定hasClaim未被嵌入 模板。确保属性名称拼写正确，并且 所有指令都列在“@NgModule.declarations”.ng中

以下是我创建指令的方式：

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
import { SecurityService } from './security.service';

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: '[hasClaim]'
})
export class HasClaimDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private ss: SecurityService,
  ) { }

  @Input() set hasClaim(claimType: any) {
    debugger;
    if (this.ss.hasClaim(claimType)) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

import{Directive，TemplateRef，ViewContainerRef，Input}来自'@angular/core'；
从“./security.service”导入{SecurityService}；
@指示({
//tslint：禁用下一行：指令选择器
选择器：“[hasClaim]”
})
导出类HasClaimDirective{
建造师(
私有templateRef:templateRef

仔细观察错误消息：

嵌入模板上的任何指令均未使用属性绑定hasClaim。请确保属性名称拼写正确，并且所有指令都列在“@NgModule.declarations”.ng中

可能的修复1:

看这行他们说的话：

directives are listed in the "@NgModule.declarations

修复方法是：转到您的app.module.ts，然后导入您的指令，并在导入后将其添加到声明数组中

例如：这在我的项目中

我这里有进口代表


我猜您的错误是想告诉您-导入您的指令，然后将其放入
app.module.ts

可能的修复2:

您不应该在html中的指令之前使用星号（*）

正如angular建议的，阅读这一文档页面可能会满足您的需要

问题在于您正在
app.module.ts
中声明指令，并且希望在
navBarModule.module.ts
中声明的组件中使用该指令

如果仅在navbar.component中使用指令，请在navbar.module中声明该指令

否则，您可以创建一个模块，例如，
utils.module
，在其中声明和导出指令，并在模块中导入需要该指令的组件

import { NgModule } from '@angular/core';
import {HasClaimDirective} from './hasclaim.directive'


@NgModule({
  declarations: [ HasClaimDirective ],
  exports:[HasClaimDirective]
})
export class UtilsModule { }

在导航模块中

@NgModule({
  imports:      [ BrowserModule, FormsModule,UtilsModule ],
  declarations: [ NavBarComponent ],
  exports:[NavBarComponent ]
})
export class NavBarModule { }

@NgModule({
  imports:      [ BrowserModule, FormsModule,UtilsModule ],
  declarations: [ NavBarComponent ],
  exports:[NavBarComponent ]
})
export class NavBarModule { }