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

    ` 
    ... 

出口类ViewResultsComponent实现的OnInit { ExplodeMe： “1-2-03-4-5”; }

1. 我在哪里插入HTML以包含在输出中？这是管道方法吗？我能否以某种方式告诉管道以{{}}部分的某种方式进行格式化？
2. 什么数据提供给管道我如何访问它？

谢谢！

Answer 1

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

我建议你创建一个管道，需要一个字符串，并返回一个数组，使用破折号作为分割符：

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

而这正是我想要的:)