Angular 12 和自定义管道....如何？

Question

缩写：

我收到一个错误The pipe 'getListItemText' could not be found

长格式：

我需要使用管道将一系列数据对象（一个稍微复杂的 json 对象）转换为 html 字符串

这对于角管来说似乎是理想的！

这个管道对这个数据非常特殊，所以所有东西都包含在组件目录中：

管道（get-list-item-text.pipe.ts）：

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

@Pipe({
  name: 'getListItemText'
})
export class GetListItemTextPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value.trim().split(/\s+/).length;
  }

}

（我会让它变得更复杂，一旦我有基本的工作就做我想做的事）

组件定义 (descriptions.module.ts)：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DescriptionsComponent } from './descriptions.component';
import { DescriptionResolver } from './description.resolver';
import { DescriptionService } from './description.service';
import { GetListItemTextPipe } from './get-list-item-text.pipe';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    DescriptionsComponent,
    GetListItemTextPipe,
  ],
  providers: [
    DescriptionResolver,
    DescriptionService,
  ]
})
export class DescriptionsModule { }

...以及我正在使用的 html (descriptions.component.html) 片段：

          <li *ngFor="let section of notebook.description.sections" ><span \
                      [innerHTML]="section.prepend | getListItemText "></span></li> 

如果我运行测试 (ng test --watch=false)，我会收到错误 The pipe 'getListItemText' could not be found：

Chrome Headless 96.0.4664.45 (Linux x86_64) DescriptionsComponent should init, call the DescriptionSelector service, and get a response FAILED
    Error: NG0302: The pipe 'getListItemText' could not be found!. Find more at https://angular.io/errors/NG0302
    error properties: Object({ code: '302' })
    Error: NG0302: The pipe 'getListItemText' could not be found!. Find more at https://angular.io/errors/NG0302
        at getPipeDef$1 (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25804:1)
        at ɵɵpipe (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25761:1)
        at DescriptionsComponent_section_21_li_7_Template (ng:///DescriptionsComponent.js:7:5)
        at executeTemplate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9579:1)
        at renderView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9383:1)
        at TemplateRef.createEmbeddedView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:23036:1)
        at ViewContainerRef.createEmbeddedView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:23167:1)
        at node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js:3340:1
        at DefaultIterableDiffer.forEachOperation (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:21569:1)
        at NgForOf._applyChanges (node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js:3335:1)
Chrome Headless 96.0.4664.45 (Linux x86_64): Executed 49 of 62 (1 FAILED) (skipped 4) (0 secs / 0.217 secs)
Chrome Headless 96.0.4664.45 (Linux x86_64) DescriptionsComponent should init, call the DescriptionSelector service, and get a response FAILED
    Error: NG0302: The pipe 'getListItemText' could not be found!. Find more at https://angular.io/errors/NG0302
    error properties: Object({ code: '302' })
    Error: NG0302: The pipe 'getListItemText' could not be found!. Find more at https://angular.io/errors/NG0302
        at getPipeDef$1 (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25804:1)
        at ɵɵpipe (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25761:1)
        at DescriptionsComponent_section_21_li_7_Template (ng:///DescriptionsComponent.js:7:5)
        at executeTemplate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9579:1)
        at renderView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9383:1)
        at TemplateRef.createEmbeddedView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:23036:1)
        at ViewContainerRef.createEmbeddedView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:23167:1)
        at node_modules/@angular/common/__ivy_ngcc__/fesm2015/common.js:3340:1
        at DefaultIterableDiffer.forEachOperation (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:21569:1)

如果我从 HTML 片段中删除管道，则测试通过。

我发现的一切都表明这是一个正确的实现，但显然不是。

我错过了什么？

如何指定并使用自定义管道？

（请注意，我确实尝试了顶级定义，并将管道定义添加到 app.module.ts 文件中......同样的问题；并按照 Getting 'Could Not Be Found' Error re: Custom Pipe in Angular 2 App 中的建议添加 constructor 没有区别)

Answer 1

查看实时示例https://stackblitz.com/edit/angular-11-new-f5hoeu?file=src/app/app.component.html

创建管道.module.ts 文件

import { NgModule } from "@angular/core";

@NgModule({
  declarations: [ // import all pipes here
    GetListItemTextPipe 
  ],
  imports: [],
  exports: [ // import all pipes here
    GetListItemTextPipe 
  ]
})
export class PipesModule { }

在app.module.ts文件中导入PipesModuleimports数组

在descriptions.module.ts文件中导入PipesModuleimports数组