【Question】为什么angular component 使用内置的pipe 需要注入

问题原因

待调查

问题描述

当在使用内置的pipe 的时候我们一般使用在template 文件里面，并没有需要额外注入，只需要在component所在module里面加上这句即可import { CommonModule } from '@angular/common'; 因为像常用了ngIf, ngSwitch，datePipe，jsonPipe 都在CommonModule 中被声明。

template 里面直接使用datePipe 运行正常，时间能够被正确的transform

<nb-card >
    <nb-card-body>
		current time by template use: {{ '2022/6/1/ 16:03' | date: 'yyyy-MM-dd HH:mm:ss' }}
    </nb-card-body>
</nb-card>

但是当component里面调用譬如datePipe 时, 不在module 或者component 的providers 里面引入DatePipe, 则会报注入错误

<nb-card >
    <nb-card-body>
		current time by component use: {{ currentForComponent }}
    </nb-card-body>
</nb-card>

export class DemoComponent implements OnInit {

  currentForComponent: string;

  constructor(
    private datePipe: DatePipe,  // 不添加providers 则会报注入错误
  ) { }
  
  ngOnInit(): void {
    this.currentForComponent= this.datePipe.transform('2022/6/1/ 16:03', 'yyyy-MM-dd HH:mm:ss');
  }
}

注入错误信息如下：

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(DemoComponent)[DatePipe -> DatePipe -> DatePipe -> DatePipe -> DatePipe]: 
  NullInjectorError: No provider for DatePipe!

参考文献

• Angular component 组件内使用原生pipe
• CommonModule