无法从其他 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

我在各自的文件中有以下代码

plugin-slot.指令

@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 中的指令认为这可能与延迟加载模块有关，我显然遗漏了一些东西但我看不到以木换木，因为我一直盯着这个看，感觉就像永恒一样。

谁能看出问题来，看在children的份上，请指点一下好吗？

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 加载惰性模块中的指令

Can't load Directive in lazy module from other NgModule

angular-directive

angular