Question

我正忙着为Angular2编写我的第一个管道，我需要一些帮助把它放在一起。

问题： 我有一个api返回一组数字：1-2-03-4-5我想像这样设置这些数字：

<div class="number">1</div>
<div class="number">2</div>
<div class="number">03</div>
<div class="number">4</div>
<div class="number">5</div>

如果这就是PHP我只想去的地方：

$array = explode("-","1-2-03-4-5");
foreach ($array AS $number) {
    echo ' <div class="number">'.$number.'</div>';
}

我的目标是以角度做这种事情，所以我创建了一个管道：

import {Pipe} from "angular2/core";

@Pipe({
    name:"explode"
})
export class ExplodePipe {
    transform(value) {
        return some explody stuff here;
    }
}

这包含在我的组件中

import {Component, OnInit} from 'angular2/core';
import {RouteParams, ROUTER_DIRECTIVES} from "angular2/router";
import {HelpMenuComponent} from "./help-menu.component";
import {ExplodePipe} from "../Pipes/my.pipes";

@Component({
    pipes:[ExplodePipe],

    template: `
        {{ExplodeMe | explode}}

    `
    ...

导出类ViewResultsComponent实现OnInit { 爆炸：“1-2-03-4-5”; }

我将在哪里插入要包含在输出中的HTML？这会是管道方法吗？我可以以某种方式告诉管道从{{}}部分以某种方式格式化吗？
管道可以使用哪些数据如何访问它？

谢谢！

Answer 1

管道用于将数据作为输入，并将其转换为输出。转换功能的实现取决于您。但请记住，输出仍然需要是数据（它不能包含HTML）。

我建议您使用短划线作为拆分分隔符创建一个接受字符串并返回数组的管道：

proposalService#getProposalsDataset(DatatablesCriterias criterias)

在* ngFor表达式中使用Pipe循环遍历项目并格式化div中的每个项目：

Dataset

Demo Plnkr

<强> [编辑]

构建可重复使用的组件

如果您想要一直应用管道的公共模板，请将管道和模板组合成可重用的组件：

@Pipe({
    name:"explode"

})
export class ExplodePipe {
    transform(value) {
        return value.split('-');
    }
}

用法：

@Component({
    selector: 'app',
    pipes: [ExplodePipe]
    template: `
        <div *ngFor="#item of test | explode ">{{item}}
        </div>
    `
})
export class AppComponent {
    test:string;
    constructor() {
      this.test = '1-2-03-4-5'
    }
}

Demo Plnkr

Answer 2

所以我想我会发布我的最终解决方案。这基本上与PHP爆炸完全相同，非常有用！

我的管道

import {Pipe} from "angular2/core";
import {InvalidPipeArgumentException} from "angular2/src/common/pipes/invalid_pipe_argument_exception";
import {isString, isBlank} from "angular2/src/facade/lang";

@Pipe({
    name:"explode"
})
export class ExplodePipe {

    transform(value, key) {

        if (!isString(key))
        {
           key = '-';
        }

        if (isBlank(value))
            return value;
        if (!isString(value)) {
            throw new InvalidPipeArgumentException(ExplodePipe, value);
        }

        return value.split(key);

    }

}

在我的HTML代码中使用管道：

拆分一些字符串：1-2-3-4-5

{{SomeString | explode:'-'}} or simply: {{SomeString | explode}} since '-' is default

拆分一些字符串：1 * 2 * 3 * 4 * 5

{{SomeString | explode:'*'}}

在一个真实的例子中：

SomeNumbers = '1,2,3';
<div *ngFor="#item of SomeNumbers | explode:','" class="number">{{item}}</div>

打印出来：

<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>

这正是我想要的：）

Angular2爆炸管道

2 个答案: