无法绑定到指令('appHasAccess')，因为它不是'input'的已知属性

Question

我创建了一个自定义属性指令库包并安装到 myProject 中，当我尝试使用此自定义指令时抛出错误。

错误 错误：

未捕获(在承诺中(：错误：模板解析错误： 无法绑定到"appHasAccess"，因为它不是 的已知属性 "输入"。

我使用的代码如下：

我做了所有可能的尝试。 任何人都知道我如何解决这个问题。

1. 指令：HasAccessDirective.ts

@Directive({
  selector: '[appHasAccess]',
})
export class HasAccessDirective {
accessDetail = { 'a': 1 }
 @Input('appHasAccess') set appHasAccess(accessDetail: any) {
    // Based on right control enable/disable
    this.eleRef.nativeElement.disabled = this.appRights.hasRights(accessDetail);
}
constructor(private eleRef: ElementRef,
    private appRights: MyService) { }
}

2. 模块：数字用户权限模块

   @NgModule({
        declarations: [
            HasAccessDirective
        ],
        imports: [
            CommonModule,
            HttpClientModule,
        ],
        exports: [
            HasAccessDirective
        ],
        providers: [UserRightsService]
    })
export class DigiUserRightsModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DigiUserRightsModule,
            providers: [UserRightsService]
        };
    }
}

Answer 1

我做了以下更改以使其工作。我将指令模块注入到我的用户模块而不是应用程序模块。用户模块在它加载的路由上延迟加载并且工作正常。

• 在用户模块上设置我的指令包模块：

  import { NgModule }      from '@angular/core';       
  @NgModule({
     declarations: [],
     imports: [
         DigiUserRightsModule.forRoot()
     ],
     providers: []
  })
  export class UserModule {}
  

Answer 2

1. 我认为你的@Input有问题.输入应如下所示：

@Input('appHasAccess'): any

2. 您不会在指令中声明accessDetail = { 'a': 1 }。这应该是您从 html 中输入的，如下所示：

   // In HTML
   <div id="myElement" appHasAccess={{accessDetail}}
   // In TypeScript
   accessDetail = { 'a': 1 }