Angular自定义管道

女爷i 2023-06-10 12:21 29阅读 0赞

1.用命令生成multiple管道

ng g pipe pipe/multiple

画面效果：

![20191027181905796.png][]

**app.component.ts**

import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      num = 11;
    }

**multiple.pipe.ts**

import { Pipe, PipeTransform } from '@angular/core';
    
    @Pipe({
      name: 'multiple'
    })
    export class MultiplePipe implements PipeTransform {
    
      transform(value: number, args?: number): any {
        if (!args) {
          args = 1;
        }
        return value * args;
      }
    }

**app.component.html**

<h3>我是父组件</h3>
    <div>自己的管道：{
       {num | multiple}}</div>
    <div>自己的管道：{
       {num | multiple:'3'}}</div>
    <div>自己的管道：{
       {num | multiple:'11'}}</div>

**app.module.ts**

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { FormsModule } from '@angular/forms';
    import { MultiplePipe } from './pipe/multiple.pipe';
    
    @NgModule({
      declarations: [AppComponent, MultiplePipe],
      imports: [BrowserModule, FormsModule],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

[20191027181905796.png]: /images/20230531/5c0611af49a44dfa82999922395e9145.png

发表评论取消回复

表情：

评论列表（有 0 条评论，29人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular自定义管道

1.用命令生成multiple管道 ng g pipe pipe/multiple 画面效果： ![20191027181905796.png][] app.compo

女爷i/ 2023年06月10日 12:21/ 0 赞/ 30 阅读

相关 Angular 管道

定义：先创建管道文件夹 ![20191110143311578.png][] 创建管道，这里是为了将number型的金额转为合适的显示 ![20191110143

超、凢脫俗/ 2023年05月30日 12:00/ 0 赞/ 12 阅读

相关 angular 自定义指令

1：首先获取module对象 var myAppModule = angular.module('myApp', \[\]); 2：定义指令 my.directive('

短命女/ 2022年08月25日 05:14/ 0 赞/ 230 阅读

相关 Angular自定义指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

左手的ㄟ右手/ 2022年06月10日 02:52/ 0 赞/ 271 阅读

相关 Angular管道操作符(|)

一、模板表达式操作符模板表达式语言使用了JavaScript 语法的子集，并补充了几个用于特定场景的特殊操作符：管道操作符、安全导航操作符。二、管道操作符 (|) 在

忘是亡心i/ 2022年06月04日 05:23/ 0 赞/ 277 阅读

相关 angular 自定义指令

demo06.component.ts import { Component, OnInit } from '@angular/core'; @Co

ゝ一世哀愁。/ 2022年06月01日 04:10/ 0 赞/ 283 阅读

相关 angular 管道应用

原文出处：[https://www.cnblogs.com/LWJ-booke/p/9512126.html][https_www.cnblogs.com_LWJ-booke_

快来打我*/ 2022年05月10日 05:54/ 0 赞/ 203 阅读

相关 Angular 2 + 折腾记：(5) 动手实现一个自定义管道（实用、赞）

原文出处：[https://blog.csdn.net/crper/article/details/68065696][https_blog.csdn.net_crper_ar

亦凉/ 2022年03月30日 04:18/ 0 赞/ 312 阅读

相关 Angular2+ 自定义指令@Directive

概述所谓指令就是用于改变一个DOM元素的外观或行为，Angular2+为我们封装了很多的内置指令，项目中也无时无刻不在使用指令,Angular2+中有三类指令

怼烎@/ 2022年01月14日 11:15/ 0 赞/ 319 阅读

相关 angular 自定义指令详解 Directive

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 在angular中，Directive，自定义指令的学习

蔚落/ 2022年01月13日 18:15/ 0 赞/ 334 阅读