Dynamische Rohr in den Winkel-2

Gebäude auf borislemke Antwort, hier ist eine Lösung, die nicht brauchen eval() und das finde ich ziemlich sauber:

dynamisch.Rohr.ts:

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


@Pipe({
  name: 'dynamicPipe'
})
export class DynamicPipe implements PipeTransform {

    public constructor(private injector: Injector) {
    }

    transform(value: any, pipeToken: any, pipeArgs: any[]): any {
        if (!pipeToken) {
            return value;
        }
        else {
            let pipe = this.injector.get(pipeToken);
            return pipe.transform(value, ...pipeArgs);
        }
    }
}

app.- Modul.ts:

//…
import { DynamicPipe } from './dynamic.pipe';

@NgModule({
  declarations: [
    //…
    DynamicPipe,
  ],
  imports: [
    //…
  ],
  providers: [
    //list all pipes you would like to use
    PercentPipe,
    ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.Komponente.ts:

import { Component, OnInit } from '@angular/core';
import { PercentPipe } from '@angular/common';

@Component({
  selector: 'app-root',
  template: `
    The following should be a percentage: 
    {{ myPercentage | dynamicPipe: myPipe:myPipeArgs }}
    `,
  providers: []
})

export class AppComponent implements OnInit {
  myPercentage = 0.5;
  myPipe = PercentPipe;
  myPipeArgs = [];
}

Ich es geschafft, etwas arbeiten, es ist ein bisschen schmutzig und böse (mit eval), aber es funktioniert der trick für mich. In meinem Fall habe ich die table-Komponente mit verschiedenen Daten-Typen in jeder Zeile (e.g Titel, url, Datum, status). In meiner Datenbank, status ist gekennzeichnet als 1 als enabled oder 0 für disabled. Natürlich, es ist mehr vorzuziehen, zu zeigen, aktiviert/deaktiviert, um meine user. Auch mein Titel-Spalte ist mehrsprachig, das es ein Objekt mit entweder en oder id wie es ist Schlüssel.

//Example row object:
title: {
    "en": "Some title in English",
    "id": "Some title in Indonesian"
},
status: 1 //either 1 or 0

Ideal, ich brauche 2 verschiedene Rohre zum konvertieren meiner Daten zu zeigen, um meine app-user. So etwas wie translateTitle und getStatus wird gut gehen. Nennen wir die übergeordnete Leitung dynamicPipe.

///some-view.html
{{ title | dynamicPipe:'translateTitle' }}
{{ status | dynamicPipe:'getStatus' }}


///dynamic.pipe.ts
//...import Pipe and PipeTransform

@Pipe({name:'dynamicPipe'})
export class DynamicPipe implements PipeTransform {

    transform(value:string, modifier:string) {
        if (!modifier) return value;
        return eval('this.' + modifier + '(' + value + ')')
    }

    getStatus(value:string|number):string {
        return value ? 'enabled' : 'disabled'
    }

    translateTitle(value:TitleObject):string {
        //defaultSystemLanguage is set to English by default
        return value[defaultSystemLanguage]
    }
}

Werde ich wohl eine Menge Hass auf die Verwendung von eval. Hoffe, es hilft!

Update: wenn man es mal brauchen könnte

posts = {
    content: [
        {
            title:
                {
                    en: "Some post title in English",
                    es: "Some post title in Spanish"
                },
            url: "a-beautiful-post",
            created_at: "2016-05-15 12:21:38",
            status: 1
        },
        {
            title:
                {
                    en: "Some post title in English 2",
                    es: "Some post title in Spanish 2"
                },
            url: "a-beautiful-post-2",
            created_at: "2016-05-13 17:53:08",
            status: 0
        }
    ],
    pipes: ['translateTitle', null, 'humanizeDate', 'getStatus']
}

<table>
    <tr *ngFor="let row in posts">
        <td *ngFor="let column in row; let i = index">{{ column | dynamicPipe:pipes[i] }}</td>
    </tr>
</table>

Zurück:

| title          | url            | date           | status         |
| Some post t...   a-beautiful...   an hour ago      enabled
| Some post ...2   a-beautifu...2   2 days ago       disabled