文章参考
使用命令创建
ng generate pipe strLength
生成
str-length.pipe.ts
文件,文件后缀名前面需要指明组件类型
指令内容
引入 Pipe 和 PipeTransform 从 @angular/core模块中
str-length.pipe.ts
文件
import {Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'strLength'
})
export class StrLengthPipe implements PipeTransform{
transform(value: string, args?: any): any {
return value + "----" + "huangbiao";
}
}
在ngModule中声明自定义的管道
/**
* 告诉angular 如何组装应用
*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { HeaderComponent } from './page/header/header.component';
import { NewsComponent } from './page/news/news.component';
import {StorageService} from './page/service/storage.service'
import { AppRoutingModule } from './router/app-routing.module';
import { HttpdemoComponent } from './page/httpdemo/httpdemo.component';
import { StrLengthPipe } from './pipeCustomer/str-length.pipe';
//@NgModule 装饰器将AppModule标记为Angular 模块类(也叫做 NgModule类)
// @NgModule 接收一个元数据对象,告诉Angular 如何编译和启动应用
@NgModule({
// 引入当前项目运行的组件,自定义组件都需要引入并且在这里声明
// 依赖注入
declarations: [
AppComponent,
HeaderComponent,
NewsComponent,
HttpdemoComponent,
StrLengthPipe
],
// 当前项目依赖哪些模块
imports: [
BrowserModule,
HttpClientModule,
// 如果要引入双向绑定,则需要引入FormModule
FormsModule,
AppRoutingModule
],
// 定义服务
providers: [
StorageService
],
// 默认启动哪个组件
bootstrap: [AppComponent]
})
// 根模块不需要导出任何东西,因为其他组件不需要导入根模块,但是一定要写
export class AppModule { }
模板中使用
<div>
{{title | strLength}}
</div>