找不到离子管

Posted 2023-03-13

【中文标题】找不到离子管

【英文标题】：Ionic pipe not found

【发布时间】：2020-09-22 00:31:48

【问题描述】：

我正在尝试在我的 Ionic 应用程序中使用管道，经过长时间的反复试验，我找到了这个教程：

https://levelup.gitconnected.com/create-your-own-pipe-in-angular-8-35f1f969ec49

它看起来很有希望，但它不起作用。我遵循了货币管道，但当然如果可行，因为货币是内置管道。一旦我将管道重命名为 customcurrency，它就会给出与所有其他教程相同的错误：

core.js:6260 ERROR 错误：未捕获（承诺）：错误：管道 找不到“自定义货币”！错误：管道“customcurrency” 找不到！ 在 getPipeDef$1 (core.js:36866) 在 ɵɵpipe (core.js:36824) 在 PostPage_ng_container_9_Template (template.html:33) 在执行模板 (core.js:12129) 在渲染视图（core.js:11899） 在 TemplateRef.createEmbeddedView (core.js:15576) 在 ViewContainerRef.createEmbeddedView (core.js:15687) 在 NgIf._updateView (common.js:4785) 在 NgIf.set ngIf [as ngIf] (common.js:4750) 在 setInputsForProperty (core.js:13859) 在 resolvePromise (zone-evergreen.js:798) 在 resolvePromise (zone-evergreen.js:750) 在 zone-evergreen.js:860 在 ZoneDelegate.invokeTask (zone-evergreen.js:399) 在 Object.onInvokeTask (core.js:41640) 在 ZoneDelegate.invokeTask (zone-evergreen.js:398) 在 Zone.runTask (zone-evergreen.js:167) 在 drainMicroTaskQueue (zone-evergreen.js:569) 在 ZoneTask.invokeTask [作为调用] (zone-evergreen.js:484) 在 invokeTask (zone-evergreen.js:1621)

管道：

import  Pipe, PipeTransform  from '@angular/core';
@Pipe(
  name: 'customcurrency'
)
export class CustomCurrencyPipe implements PipeTransform 
  transform(value: number): any 
    return "$" + value;
  

app.module:

@NgModule(
  declarations: [AppComponent, CustomCurrencyPipe],
  entryComponents: [],
  imports:
    [
      CommonModule,
      ReactiveFormsModule,
      BrowserModule,
      HttpClientModule,
      IonicModule.forRoot(), AppRoutingModule
    ],
  providers: [
    CustomCurrencyPipe,
    StatusBar,
    SplashScreen,
    HttpClientService,
     provide: RouteReuseStrategy, useClass: IonicRouteStrategy 
  ],
  bootstrap: [AppComponent]
)
export class AppModule 

用法：

 balance | customcurrency 

更新

我试图在 StackBlitz 上重现我的错误：

https://stackblitz.com/edit/ionic-tup4fz

你猜怎么着？有用！所以，真正的问题是；为什么它在我的 Ionic 应用程序中不起作用？

更新 2

我开始了一个新的 Ionic 项目，添加了一个简单的管道……仅此而已。同样的问题：错误错误：未捕获（承诺）：错误：找不到管道'customCurrency'！

我做了什么：

启动新的 Ionic 应用程序：离子启动 PipeTest 空白 添加了管道：离子生成管道管道/自定义货币 调用 home.page.html 中的应用程序： balance |自定义货币 在 home.page.ts 中添加余额：balance: number = 500; 完成

【问题讨论】：

我之前的回答可能对你有用***.com/a/50020420/9590251

【参考方案1】：

您不应将自定义管道类命名为 CurrencyPipe，因为已经有一个具有该类名称的内置管道。

例如，将您的班级重命名为 CustomCurrencyPipe：

export class CustomCurrencyPipe implements PipeTransform 

还要检查 app.module.ts 是否导入了自己的管道（不是 Angular 的 CurrencyPipe）并在声明中使用新类：

declarations: [AppComponent, CustomCurrencyPipe],

【讨论】：

关键是他应该在他的导入中注意他使用的是自己的管道而不是内置的管道。不是他不能用同名

虽然我同意@misha130，但最好不要使用内置名称。这样您就可以看到正在使用的类、属性或管道。

@Sébastien 我更新了原始帖子中的代码。可悲的是，我仍然遇到同样的错误。

如果 stackblitz 有效，这可能意味着您的代码中存在拼写错误。

同意，但我找不到！我仔细检查了一切。会不会是导入搞砸了？

【参考方案2】：

好的，经过长时间的搜索，尝试和再次阅读所有这些教程，我找到了答案。

其实很简单。只需从 app.module.ts 中删除管道声明，然后放入要使用管道的页面的模块中。 如果您按照创建新 Ionic 应用程序的步骤操作，您将获得一个 home.page（其中包含一个模块）。将管道声明放在 home.module.ts 中，在 home.page.html 的 HTML 中使用管道。 不要忘记将管道添加到 app.module.ts 中的提供程序

这种方式在我找到的教程中几乎从未提及。也许那些是旧版本的？