ionic3自定义管道，导入使用后报错找不到管道（The pipe 'wordPlacePipe' could not be found）的坑_the pipe 'keyword' could not be found-程序员宅基地

技术标签： 学习  angular  前端  ionic  

最近在做一个app项目。使用了ionic3框架，中间要做一个输入框输入字符在一些已知的字符中筛选并高亮提示的搜索功能，我选择使用过滤的方法来实现，在angular4-ionic3中也叫管道。

在项目中创建管道命令行：ionic g pipe wordPlace

创建完成后，会生成如下文件目录：

我所需要的功能只需要在word-place.ts中写入代码就可以了，然后在app.module.ts中导入，注意在imports中添加：

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

// pages
import { AboutPage } from '../pages/about/about';

/* pipes */
import { PipesModule } from '../pipes/pipes.module';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    PipesModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

然后在page中使用就可以了，然后使用的时候一直报错提示管道找不到，接下来就是要注意的一点坑了：

我们看看word-place.ts这个文件中：

要注意class声明的类名和name后面的不一样

注意！！！注意！！！注意！！！在page页面的html文件中使用的时候一定要使用的是word-place.ts中命名的name后面那个，而不是class声明的类名。

报错：

正确：

在这里报错找了半天原来是这个原因！！！希望各位不要遇到这样的坑！！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37705048/article/details/83899096

智能推荐

java 获取第一条数据,如何取出每个分组的第一条记录-程序员宅基地

文章浏览阅读1.2k次。问题1：如何取出每个分组的第一条记录(×××背景)回答：select t.name1,t.name2,t.zx from (select row_number()over(partition by name1 order by zx desc)rn, test.* from test)t where t.rn=1;用rank的话你zx有值相等的，还是用row_number好了问题2：重复数据中，取..._java获得实体对象第一个值

桌面计算机网络图标不见了怎么办,网络连接图标不见了,教您网络连接图标不见了怎么办...-程序员宅基地

文章浏览阅读1.8k次。随着计算机的出现，网络连接图标被赋予了新的含义，又有了新的用武之地。电脑能联网，但是电脑桌面任务栏右下角的“网络”或是“本地链接”图标却不见了，你是不是也曾遇到过这类电脑问题呢？下面，小编给大家讲解网络连接图标不见了的处理技巧。我们都知道电脑的右下角有很多的快捷键，在我们使用的时候可以很方便的使用到。打开电脑，桌面的网络图标不见了，进入网上邻居查看同事电脑的共享文件，非常不方便，怎么来把网络图标再..._电脑联网的图标不见了

centos 安装git并配置ssh_centos设置git ssh-程序员宅基地

文章浏览阅读405次，点赞9次，收藏7次。centos 安装git并配置ssh_centos设置git ssh

如何利用 onlyoffice 实现文档格式转换_onlyoffice转换pdf-程序员宅基地

文章浏览阅读744次。日常生活和工作中，文档格式转换应该是很常见的需求。面对这样的需求，我们技术男有没有属于自己的好方法呢？答案是有的，它就是 onlyoffice，今天就来介绍如何利用 onlyoffice 实现文档格式转换。官方的 onlyoffice 版本在 4.2 之前使用的请求是 Get 类型，之后的版本使用的请求类型是 Post，这一点需要我们特别注意。下面的表格是关于格式转换 API 参数的详细介绍。属性参数描述数据类型存在类型Async定义转换请求类型：异步与否。支持的值：truefalse。_onlyoffice转换pdf

JavaScript Math.PI 属性-程序员宅基地

文章浏览阅读1.4w次，点赞3次，收藏16次。什么是PI？PI就是圆周率π，PI是弧度制的π,也就是180°所以，Math.PI = 3.14 = 180°ps，PI是一个浮小数Math.PI/5*4分别是什么意思？let dig = Math.PI/5*4Math.PI/5，表示角度平分为36° 每个顶点到与中心连线之间的夹角α=（2π）/n = Math.PI / n * 2 那么相间的两个顶点到与中心连线之间的夹..._math.pi

Windows下，使用免安装ZIP归档，安装MySQL（5.5）服务器-程序员宅基地

文章浏览阅读1.1k次。1. 解压 MySQL ZIP压缩包 到 安装路径 D:\xapp\apps\，并将解压出来的文件夹重命名为 mysql。2.将MySQL的可执行文件目录 D:\xapp\apps\mysql\bin 加入系统环境变量，然后重启计算机。6.启动Windows命令行 键入 mysql -u root -p ，然后两次回车，进入MySQL控制台。如果通过配置文件 将 数据库目录设置到了别处，则需要将 mysql程序根目录的 data目录中。的内容拷贝到新的目录中，否则MySQL无法启动。

随便推点

java file数组 初始化_Java数组的定义，声明，初始化和遍历-程序员宅基地

文章浏览阅读633次。数组的定义数组是相同类型数据的有序集合。数组描述的是相同类型的若干个数据，按照一定的先后次序排列组合而成。其中，每一个数据称作一个元素，每个元素可以通过一个索引(下标)来访问它们。数组的三个基本特点：1. 长度是确定的。数组一旦被创建，它的大小就是不可以改变的。2. 其元素必须是相同类型，不允许出现混合类型。3. 数组类型可以是任何数据类型，包括基本类型和引用类型。数组变量属引用类型，数组也可以看..._java file 数组

十四章上机1_北大青鸟java第十四章上机练习4-程序员宅基地

文章浏览阅读449次。实现客户姓名录入 package kj;public class kehu { String []names=new String[10]; public void addName(String name){ for(int i=0;i

React路由 报错 ‘Switch‘ is not exported from ‘react-router‘.-程序员宅基地

文章浏览阅读722次。配置 路由 报错 'Switch' is not exported from 'react-router'.npm uninstall react-router-domnpm install [email protected]

利用tushare实现选股_tushare 选股-程序员宅基地

文章浏览阅读1.1k次，点赞2次，收藏7次。ID:399899量化交易中，首先要弄好的就是选股。然后在才是买卖策略的制定。不同类型的策略，选股思路也不相同。俗话说得好，不管黑猫白猫，抓到老鼠的就是好猫。一个好的选股策略，往往在量化中是起较为关键的作用的。要实现程序化选股的话，数据又是一个前提。要有数据才能去实现编写程序。数据来源有很多，可以去爬取，也可以去股票交易网站下载。当然也有一些接口可以提供数据。常见的接口有tushare、baostock、akshare在这里我以一个简单的选股案例，为大家介绍一下使用tushare接口使用tush_tushare 选股

Gin框架使用Casbin进行用户权限校验_gin 的权限校验-程序员宅基地

文章浏览阅读3.7k次，点赞2次，收藏10次。以下是测试项目目录一、配置modelconf/casbin_rbac_model.conf# 请求[request_definition]r = sub,obj,act# sub ——> 想要访问资源的用户角色(Subject)——请求实体# obj ——> 访问的资源(Object)# act ——> 访问的方法(Action: get、post...)# 策略(.csv文件p的格式，定义的每一行为policy rule;p,p2为policy rule的名字。)_gin 的权限校验

OKR制定与实施：团队OKR众筹策略_运营okr的制定与实施-程序员宅基地

文章浏览阅读319次。例如，一个团队有20个人，其中有2个员工在共同做A业务，3个员工在共同做B业务，5个员工在共同做C业务，剩下10个员工在共同做D业务，那么可以基于业务相关性将这20个员工分成A业务研讨组、B业务研讨组、C业务研讨组和D业务研讨组，这样，在步骤2目标众筹时，就以A、B、C、D 4个研讨小组为单位，邀请其输出3～5个团队OKR，然后团队主管再基于所有小组贡献的团队OKR进行投票表决，形成团队的OKR。通过这种方式，大大增强了团队成员对团队目标的共识程度，团队目标真正变成了大家共同的目标，而不再只是主管的目标。_运营okr的制定与实施

推荐文章

热门文章

相关标签