Question

我在这里找到了这个解决方案：

Angular - Use pipes in services and components

这个解决方案很棒，但我想知道是否有办法在该自定义组件的模板中使用自定义管道，例如：

`<div *ngFor=" something of someThings | customPipe: value">
</div>`

有办法做到这一点吗？

Answer 1

// ListConcatPipe.ts

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

@Pipe({
    name: 'listConcat'
})
export class ListConcatPipe implements PipeTransform {

    transform(list: any[], seperator:any) {
        let str = "";
        list.forEach(element => {
            str = str + element + seperator;
        });
        return decodeURIComponent(str);
    }

}

// html模板就像这样

<span class="vmiddle">Destination path : {{user}}/plans &amp; specs/{{uploadPath | listConcat : "/"}}</span>

//模块声明就像这样

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

import { ListConcatPipe } from './list-concat.pipe';
import { Component } from './projects.compoennt';

@NgModule({
    imports: [CommonModule],
    declarations: [ListConcatPipe, Component],
    exports: [Component]
})

export class PipesModule { }

在组件中使用管道

1 个答案: