Question

我想在我的组件中使用datePipe。我按照here的说明进行操作，但我遇到了

Error: StaticInjectorError[DatePipe]: 
StaticInjectorError[DatePipe]: 
NullInjectorError: No provider for DatePipe!

这是我的代码：

组件

import { DatePipe } from '@angular/common';

export class LivePreviewComponent implements OnInit{
    currentDate = new Date();     

    constructor(private datePipe:DatePipe) {}
    ngOnInit() {
        this.datePipe.transform(this.currentDate, 'YYYY-MM-DDTHH:mm')
    }
}

Answer 1

添加到组件

中的providers数组

@Component({
    selector: 'app-root',
    templateUrl: '...',
    providers:[DatePipe]
})

或将其注入模块

@NgModule({
    providers:[DatePipe]       
})

或编写一个单独的类来扩展DatePipe并将其用作服务

@Injectable()
export class CustomDatePipe extends DatePipe {
  transform(value, format) {
    return super.transform(value, format);
  }
}

并将其注入提供者数组

@Component({
        selector: 'app-root',
        templateUrl: '...',
        providers:[CustomDatePipe]
    })

Answer 2

添加模块providers: [DatePipe],

添加构造函数private datePipe: DatePipe

为表单数组添加Ts文件：

const start_date = this.datePipe.transform(starttime, 'hh:mm a');
const end_date = this.datePipe.transform(endtime, 'hh:mm a');
this.Form.controls['starttime'].patchValue(start_date);
this.Form.controls['endtime'].patchValue(end_date);

Answer 3

与服务不同，管道不可注射。要在组件中使用管道，您需要创建它的新实例：

ngOnInit() {
    console.log(new DatePipe().transform(this.currentDate, 'YYYY-MM-DDTHH:mm'));
}

如何在Component中使用管道

3 个答案: