[英]Can't load Directive in lazy module from other NgModule
I am having a problem loading a Directive and getting the dreaded Can't bind to 'hapPluginSlot' since it isn't a known property of 'ng-container'.
我在加载指令时遇到问题,并且使可怕的对象
Can't bind to 'hapPluginSlot' since it isn't a known property of 'ng-container'.
In my project I have the following setup 在我的项目中,我有以下设置
app
- shared
shared.module
- directives
directives.module
plugin-slot.directive
- protected
protected.module
- home
home.module (lazy loaded)
home.component
An I have the following code in the respective files 我在相应文件中有以下代码
plugin-slot.directive 插件,slot.directive
@Directive({
selector: '[hapPluginSlot]'
})
export class PluginSlotDirective {
@Input() name: string;
@Input() type: string;
constructor() {
console.log(this.name, this.type);
}
}
directives.module directives.module
@NgModule({
imports: [
/* Angular Imports */
CommonModule
],
declarations: [
PluginSlotDirective
],
exports: [
PluginSlotDirective
]
})
export class DirectivesModule { }
shared.module 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 { }
I am importing SharedModule
into my home.module
as below 我将
SharedModule
导入到home.module
,如下所示
@NgModule({
imports: [
SharedModule, //<--- shared module imported here
HomeRouterModule
],
declarations: [
HomeComponent
]
})
export class HomeModule { }
And using the directive in the component template as below 并在组件模板中使用指令,如下所示
...
<mat-nav-list>
<ng-container [hapPluginSlot] type="route">
</ng-container>
</mat-nav-list>
...
And finally get to the question, I have checked and checked over this code and I am 100% certain that I have all the imports
and exports
in all the right places. 终于搞定了这个问题,我已经确认并检查了这些代码,我可以肯定100%,我有所有的
imports
和exports
在所有适当的地方。 Why am I getting this error? 为什么会出现此错误?
I have even tried stripping back to just load the directive in the AppModule
and AppComponent
thinking it may be something to do with lazy loaded modules, I am clearly missing something but I cannot see the wood for the trees as I have been staring at this for what feels like an eternity. 我什至尝试剥离以仅将指令加载到
AppModule
和AppComponent
以为这可能与延迟加载的模块有关,我显然缺少了一些东西,但是由于一直盯着它,所以看不到树木的木头。感觉像是永恒。
I anyone can spot the problem then please, for the sake of the children, please point it out to me? 我谁能发现问题,然后,为了孩子们,请向我指出?
It's a syntax issue, first solution is to use your directive like this : 这是一个语法问题,第一个解决方案是使用您的指令,如下所示:
<ng-container hapPluginSlot type="route"></ng-container>
You could change the directive declaration to use a more compact syntax : 您可以更改指令声明以使用更紧凑的语法:
@Directive({
selector: '[hapPluginSlot]'
})
export class PluginSlotDirective {
...
@Input('hapPluginSlot') type: string;
And call it like this : 并这样称呼它:
<ng-container [hapPluginSlot]="route"></ng-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.