web-dev-qa-db-ja.com

コンポーネントでパイプを使用する方法

コンポーネントでdatePipeを使用します。私は指示に従いました ここ ですが、

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')
    }
}
angularangular-pipe
9
M.Nar

コンポーネントのプロバイダー配列に追加する

@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]
    })
30
Aravind

モジュールに追加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);
6
Thulasiram Virupakshi