Question

我在加载指令并获取可怕的Can't bind to 'hapPluginSlot' since it isn't a known property of 'ng-container'.

时遇到问题

在我的项目中，我进行了以下设置

app
  - shared
      shared.module
      - directives
          directives.module
          plugin-slot.directive
  - protected
      protected.module
      - home
          home.module (lazy loaded)
          home.component

我在相应文件中有以下代码

plugin-slot.directive

@Directive({
  selector: '[hapPluginSlot]'
})
export class PluginSlotDirective {

  @Input() name: string;
  @Input() type: string;

  constructor() {
    console.log(this.name, this.type);
  }

}

directives.module

@NgModule({
  imports: [
    /* Angular Imports */
    CommonModule
  ],
  declarations: [
    PluginSlotDirective
  ],
  exports: [
    PluginSlotDirective
  ]
})
export class DirectivesModule { }

共享的模块

@NgModule({
  imports: [
    /* Angular Imports */
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ...
    /* Application Imports */
    PipesModule,
    DirectivesModule,
    ComponentsModule
  ],
  declarations: [
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    PipesModule,
    DirectivesModule,
    ComponentsModule,
    ...
  ]
})
export class SharedModule { }

我将SharedModule导入到我的home.module中，如下所示：

@NgModule({
  imports: [
    SharedModule, //<--- shared module imported here
    HomeRouterModule
  ],
  declarations: [
    HomeComponent
  ]
})
export class HomeModule { }

并在组件模板中使用如下指令

...
<mat-nav-list>
  <ng-container [hapPluginSlot] type="route">
  </ng-container>
</mat-nav-list>
...

最后是问题，我已经检查并检查了这段代码，并且100％确信我在所有正确的位置拥有所有imports和exports。为什么会出现此错误？

我什至尝试剥离以仅在AppModule和AppComponent中加载指令，以为这可能与延迟加载的模块有关，我显然缺少了一些东西，但是看不到因为我一直在凝视着树木，感觉就像是永恒。

请问谁能发现问题，为了孩子们，请向我指出？

Answer 1

这是一个语法问题，第一个解决方案是使用这样的指令：

<ng-container hapPluginSlot type="route"></ng-container>

您可以更改指令声明以使用更紧凑的语法：

@Directive({
  selector: '[hapPluginSlot]'
})
export class PluginSlotDirective {
   ...
   @Input('hapPluginSlot') type: string;

并这样称呼它：

<ng-container [hapPluginSlot]="route"></ng-container>

无法从其他NgModule的惰性模块中加载指令

1 个答案: