在组件中使用管道

【问题标题】：Use pipes in components在组件中使用管道
【发布时间】：2018-06-04 13:39:53
【问题描述】：

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

Angular - Use pipes in services and components

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

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

有没有办法做到这一点？

【问题讨论】：

请发布代码，或minimal reproducible example，或任何有助于识别您的问题或请求的内容。现在，我不知道你在说什么，除了你想在组件中使用管道。如果是这样，RTFM.
当然有，否则它们就完全没用了。你读过angular.io/guide/pipes吗？
其实你发的帖子里有你问题的答案，stackoverflow.com/questions/35144821/…，找8个答案的吧。

标签： angular ionic-framework pipe

【解决方案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 { }

【讨论】：