Làm cách nào để gọi một ống Angular 2 có nhiều đối số?

Tôi biết tôi có thể gọi một đường ống như thế này:

{{ myData | date:'fullDate' }}

Ở đây, ống ngày chỉ mất một đối số. Cú pháp để gọi một đường ống có nhiều tham số hơn, từ HTML mẫu của thành phần và trực tiếp trong mã là gì?

Trong mẫu của thành phần, bạn có thể sử dụng nhiều đối số bằng cách tách chúng bằng dấu hai chấm:

{{ myData | myPipe: 'arg1':'arg2':'arg3'... }}

Từ mã của bạn, nó sẽ trông như thế này:

new MyPipe().transform(myData, arg1, arg2, arg3)

Và trong hàm biến đổi bên trong đường ống của bạn, bạn có thể sử dụng các đối số như thế này:

export class MyPipe implements PipeTransform { 
    // specify every argument individually   
    transform(value: any, arg1: any, arg2: any, arg3: any): any { }
    // or use a rest parameter
    transform(value: any, ...args: any[]): any { }
}

Beta 16 trở về trước (2016-04-26)

Các ống có một mảng chứa tất cả các đối số, vì vậy bạn cần gọi chúng như thế này:

new MyPipe().transform(myData, [arg1, arg2, arg3...])

Và chức năng biến đổi của bạn sẽ trông như thế này:

export class MyPipe implements PipeTransform {    
    transform(value:any, args:any[]):any {
        var arg1 = args[0];
        var arg2 = args[1];
        ...
    }
}

Bạn đang thiếu đường ống thực tế.

{{ myData | date:'fullDate' }}

Nhiều tham số có thể được phân tách bằng dấu hai chấm (:).

{{ myData | myPipe:'arg1':'arg2':'arg3' }}

Ngoài ra, bạn có thể chuỗi ống, như vậy:

{{ myData | date:'fullDate' | myPipe:'arg1':'arg2':'arg3' }}

Kể từ phiên bản beta.16, các tham số không được truyền dưới dạng mảng cho transform()phương thức nữa mà thay vào đó là các tham số riêng lẻ:

{{ myData | date:'fullDate':'arg1':'arg2' }}


export class DatePipe implements PipeTransform {    
  transform(value:any, arg1:any, arg2:any):any {
        ...
}

https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26

bây giờ các ống có số lượng đối số thay đổi và không phải là một mảng chứa tất cả các đối số.

Tôi sử dụng ống trong Angular 2+ để lọc các mảng của các đối tượng. Sau đây có nhiều đối số bộ lọc nhưng bạn chỉ có thể gửi một đối số nếu phù hợp với nhu cầu của bạn. Đây là một ví dụ StackBlitz . Nó sẽ tìm các khóa bạn muốn lọc và sau đó lọc theo giá trị bạn cung cấp. Nó thực sự khá đơn giản, nếu nó có vẻ phức tạp thì không, hãy xem ví dụ StackBlitz .

Đây là ống được gọi trong một lệnh * ngFor,

<div *ngFor='let item of items | filtermulti: [{title:"mr"},{last:"jacobs"}]' >
  Hello {{item.first}} !
</div>

Đây là ống,

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

@Pipe({
  name: 'filtermulti'
})
export class FiltermultiPipe implements PipeTransform {
  transform(myobjects: Array<object>, args?: Array<object>): any {
    if (args && Array.isArray(myobjects)) {
      // copy all objects of original array into new array of objects
      var returnobjects = myobjects;
      // args are the compare oprators provided in the *ngFor directive
      args.forEach(function (filterobj) {
        let filterkey = Object.keys(filterobj)[0];
        let filtervalue = filterobj[filterkey];
        myobjects.forEach(function (objectToFilter) {
          if (objectToFilter[filterkey] != filtervalue && filtervalue != "") {
            // object didn't match a filter value so remove it from array via filter
            returnobjects = returnobjects.filter(obj => obj !== objectToFilter);
          }
        })
      });
      // return new array of objects to *ngFor directive
      return returnobjects;
    }
  }
}

Và đây là Thành phần chứa đối tượng cần lọc,

import { Component } from '@angular/core';
import { FiltermultiPipe } from './pipes/filtermulti.pipe';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  items = [{ title: "mr", first: "john", last: "jones" }
   ,{ title: "mr", first: "adrian", last: "jacobs" }
   ,{ title: "mr", first: "lou", last: "jones" }
   ,{ title: "ms", first: "linda", last: "hamilton" }
  ];
}

Ví dụ về StackBlitz

Ví dụ về GitHub: Lấy một bản sao làm việc của ví dụ này tại đây

* Xin lưu ý rằng trong câu trả lời do Gunter cung cấp, Gunter nói rằng các mảng không còn được sử dụng làm giao diện bộ lọc nhưng tôi đã tìm kiếm liên kết mà anh ta cung cấp và không tìm thấy điều gì nói với yêu cầu đó. Ngoài ra, ví dụ StackBlitz được cung cấp cho thấy mã này hoạt động như dự định trong Angular 6.1.9. Nó sẽ hoạt động trong Angular 2+.

Mã hóa hạnh phúc :-)

Mở rộng từ: user3777549

Bộ lọc đa giá trị trên một bộ dữ liệu (chỉ tham chiếu đến khóa tiêu đề)

HTML

<div *ngFor='let item of items | filtermulti: [{title:["mr","ms"]},{first:["john"]}]' >
 Hello {{item.first}} !
</div>

bộ lọc

args.forEach(function (filterobj) {
    console.log(filterobj)
    let filterkey = Object.keys(filterobj)[0];
    let filtervalue = filterobj[filterkey];
    myobjects.forEach(function (objectToFilter) {

      if (!filtervalue.some(x=>x==objectToFilter[filterkey]) && filtervalue != "") {
        // object didn't match a filter value so remove it from array via filter
        returnobjects = returnobjects.filter(obj => obj !== objectToFilter);
      }
    })
  });