如何解决Angular11 忽略指令
我尝试为数字创建一个响应式表单兼容组件。我的组件包含一个用于格式化数字数据的指令。
<form [formGroup]="parentForm">
<div class="field">
<span class="field-label" [innerHtml]="label"></span>
<div class="input-group">
<ng-content></ng-content>
<input class="k-textbox" currencyTransform [formControlName]="fieldName" />
</div>
</div>
</form>
currencyTransorm
是我的指令,它是这样声明的:
@Directive({
selector: "[currencyTransform]"
})
export class CurrencyTransformDirective implements OnDestroy {
...
}
现在我有一些不同的模块。导出所有组件的一个模块(在这种情况下只有 NumeriFieldComponent
):
@NgModule({
imports: [
CommonModule,ReactiveFormsModule
],declarations: [
NumericFieldComponent
],exports: [
NumericFieldComponent
]
})
export class ComponentsModule { }
我的测试页的一个模块:
let routes: Routes = [
{ path: "",component: TestComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class TestRoutingModule { }
@NgModule({
imports: [
CommonModule,ComponentsModule,ReactiveFormsModule,TestRoutingModule,],declarations: [
TestComponent
]
})
export class TestModule { }
最后一个模块是 app.module.ts
,我在其中声明 CurrencyTransformDirective
:
@NgModule({
declarations: [
AppComponent,CurrencyTransformDirective
],imports: [
// SOME IMPORTS
AppRoutingModule,BrowserAnimationsModule,BrowserModule,CommonModule
],providers: [
// SOME PROVIDERS
],bootstrap: [AppComponent]
})
export class AppModule { }
看起来一切正常,但我的指令被忽略了。我在构造函数中尝试使用 console.log
但没有任何内容写入浏览器控制台。我做错了什么?
解决方法
一个可能的解决方案是为指令创建一个新模块。我在 ComponentsModule
上导入了新模块,现在工作正常。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。