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

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

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

插件，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 { }

shared.module

@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>