如何向Angular管道传递多个参数

在本教程中，你将学习如何在Angular pipe中传递多个参数。

通常情况下，pipe只接受单个参数，多个参数可以通过分隔符: ，传递给pipe。

假设我们有一个来自REST API的雇员数据，并希望在数据库表中显示这些数据。我们必须声明一个模型类来保存雇员信息。

让我们来声明雇员模型类Employee.ts

export class Employee {
  id: Number;
  name: string;
  firstName: string;
  middleName: string;
  lastName: string;
  salary: Number;
  salutation: string;
}

我们想在html表中的某一列中显示全名，包括--敬语 firstName middleName lastName。

在这个例子中，我们将创建一个name 自定义管道，敬语包括动态的名字、姓氏和中间名。

这就是Angular组件中使用的名字管道的样子：

{{ salutation | name: 'firstName' : 'middleName' : 'lastName' }}}

向Angular管道传递多个参数的例子

让我们来创建一个名字管道

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

@Pipe({
  name: 'name'
})
export class NamePipe implements PipeTransform {
  transform(value: any, first: string, middle: string, last): any {
    return value + ' ' + first + ' ' + middle + ' ' + last;
  }
}

这是一个用于显示全名的自定义管道

• 自定义管道实现了PipeTransform 类
• PipeTransform包含转换方法，下面是一个语法

  transform(value: any, args?: any): any {
    return null;
  }

value是一个属性，我们将应用管道操作args--是传递的参数，可以是单个参数，也可以是多个参数。

• 提供和重写带有多个参数的转换方法。

你可以传递多个参数，如下所述

  transform(value: any, first: string, middle: string, last:string): any {
    return value + ' ' + first + ' ' + middle + ' ' + last;
  }

或者你也可以用rest operator语法传递args数组。在Ecmascript2015(ES6)中引入了rest operators，用于传递参数数组的新语法。

  transform(value: any, names: string[]): any {
    return value + ' ' + names[0] + ' ' + names[1] + ' ' + names[2];
  }

我们将如何使用这个管道

  {{employee.salutation|name:employee.firstName:employee.middleName:employee.lastName}}

让我们在app.module.ts中配置管道

  import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { MultipleDirectiveComponent } from '../multiple-directive/multiple-directive.component';
import { NamePipe } from '../name.pipe';

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
  ],
  declarations: [AppComponent, MultipleDirectiveComponent, NamePipe],
  bootstrap: [AppComponent]
})
export class AppModule {}

Angular typescript组件

import { Component, OnInit } from '@angular/core';
import { Employee } from '../app/employee';

@Component({
  selector: 'app-namepipe-table',
  templateUrl: './namepipe-table.component.html',
  styleUrls: ['./namepipe-table.component.css']
})
export class NamepipeTableComponent implements OnInit {
  constructor() {}
  employees: Employee[] = [
    {
      id: 1,
      name: 'John',
      salutation: 'Mr',
      firstName: 'fram',
      middleName: 'mram',
      lastName: 'fram',
      salary: 5000
    },
    {
      id: 2,
      name: 'John',
      salutation: 'Mr',
      firstName: 'fram',
      middleName: 'mram',
      lastName: 'fram',
      salary: 1000
    },
    {
      id: 3,
      name: 'Franc',
      salutation: 'Mr',
      firstName: 'fram',
      middleName: 'mram',
      lastName: 'fram',
      salary: 3000
    },
    {
      id: 4,
      name: 'Andrew ',
      salutation: 'Mr',
      firstName: 'fram',
      middleName: 'mram',
      lastName: 'fram',
      salary: 8000
    }
  ];
  ngOnInit() {}
}

Angular模板HTML组件

<p>
  Angular pipe with multiple attributes example
</p>
<table style="width:100%">
  <tr>
    <th>id</th>
    <th>fullname</th>
    <th>salary</th>

  </tr>
  <tr
    *ngFor="let employee of employees; "
  >
    <td>{{employee.id}}</td>
    <td>
      {{employee.salutation|name:employee.firstName:employee.middleName:employee.lastName}}
    </td>
    <td>{{employee.salary}}</td>
  </tr>
</table>

总结

在Angular自定义管道中传递多个参数是非常容易的，这个例子可以在Angular 11、Angular 12和Angular 13版本中使用。