Angular 13看不到自定义管道



我正在把angular 6的应用移植到angular 13上,我遇到了管道问题。程序无法编译。

我在一个编译器认为不存在的组件上有一个自定义管道属性"shortDate"在类型"TransactionsComponent"上不存在。

代码如下(在旧版本的angular中也可以使用)

角管:

import { PipeTransform, Pipe } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
name: 'shortDate' 
})
export class DateFormatPipe extends DatePipe implements PipeTransform {
override transform(value: any, args?: any): any {
///MMM/dd/yyyy 
return super.transform(value, "MM/dd/yyyy");
}
}

<div class="dt">{{transaction.transactionDate | date: shortDate}}</div>

<共享模块/strong>

@NgModule({
declarations: [  
DateFormatPipe 
],
imports: [ 
AppRoutingModule,
BrowserModule,  
FormsModule,
HttpClientModule,
HttpInterceptorModule,  
ReactiveFormsModule, 

],
exports: [ 
AppRoutingModule,
BrowserModule,  
FormsModule,
HttpClientModule,
HttpInterceptorModule,  
ReactiveFormsModule ,

],   
})
export class SharedModule {
static forRoot(): ModuleWithProviders<SharedModule> {
return {
ngModule: SharedModule,
providers: 
[   
DateFormatPipe,  
]
};
}
} 

<消费模块/strong>

@NgModule({
declarations: [ 
],
imports: [ 
SharedModule  
],
providers: [  
], 
})
export class TransactionModule{ }

在app.module

imports: [ 
SharedModule.forRoot(),
TransactionModule
] ,

请注意:我还尝试将管道放在共享模块的exports部分。那也不行。我肯定我只是错过了一些愚蠢的东西。有人有什么想法吗?

试试这个

<div class="dt">{{transaction.transactionDate | shortDate}}</div>

尝试在Pipe装饰器中添加standalone: true标志

@Pipe({
name: 'shortDate',
standalone: true
})

最新更新