Angular2爆炸管道

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}}

    `
    ...

export class ViewResultsComponent实现OnInit {ExplodeMe：“1-2-03-4-5”; }

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

谢谢！

Answer 1

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

我建议你创建一个Pipe，它接受一个字符串并返回一个数组，使用短划线作为拆分分隔符：

@Pipe({
    name:"explode"

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

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

@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

[编辑]

构建可重用组件

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

@Component({
  selector: 'explode',
  pipes: [ExplodePipe],
  template: `
        <div *ngFor="#item of data | explode ">{{item}}
        </div>
  `
})
export class ExplodeComponent {
   @Input() data:String;

}

用法：

@Component({
    selector: 'app',
    directives: [ExplodeComponent],
    template: `
      <explode [data]="test"></explode>
    `
})
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>

这正是我想要的:)