navigationend - Angular 2 Pipe bajo condición

router events subscribe angular 4

Question

¿Es posible en Angular 2 aplicar una tubería bajo condición? Me gustaría hacer algo como:

{{ variable.text | (variable.value ? SomePipe : OtherPipe) }}

Si no, ¿cuál es la forma preferida de lograr este efecto?

Answer 1

Como otros señalaron, puede usar la sintaxis de {{condition ? (value | pipe1) : (value2 | pipe2 )}} {{condition ? (value | pipe1) : (value2 | pipe2 )}} .

Pero vale la pena saber que también el parámetro de formato de una tubería puede ser dinámico. Por ejemplo, este es un ejemplo de un número que puede formatearse con una precisión alta o baja. La condición se pasa a un método, que creará un texto de formateador condicionalmente.

 // in template
{{ value | number:getFormat(true) }}
// in .ts
public getFormat(highPrecision = false): string {
const digits = highPrecision ? 3 : 2;
return condition ? `1.${digits}:${digits} : 1.${digits}-${digits};
}

Entonces, sí, puede usar una condición para seleccionar entre 2 tubos. Pero en algunos casos, puede preferir (o solo necesitar) usar una tubería con un parámetro de formato condicional. .

Answer 2

Dado que dicha sintaxis no es compatible, creo que la única forma de hacerlo es implementar otra tubería para manejar la condición:

@Pipe({
name: ''condition''
})
export class ConditionPipe {
transform(val,conditions) {
let condition = conditions[0];
let conditionValue = conditions[1];
if (condition===conditionValue) {
return new Pipe1().transform(val);
} else {
return new Pipe2().transform(val);
}
}
}

Y úsalo de esta manera:

@Component({
selector: ''app''
template: `
<div>
{{val | condition:cond:1}}<br/>
</div>
`,
pipes: [ Pipe1, Pipe2, ConditionPipe ]
})
export class App {
val:string = ''test'';
cond:number = 1;
}

Vea este plunkr: https://plnkr.co/edit/KPIA5ly515xZk4QZx4lp?p=preview .

Answer 3

Necesita cambiar un poco la sintaxis:

{{variable.value ? (variable.text | SomePipe) : (variable.text | pipe2)}}

Ejemplo de Plunker

Answer 4

También podrías usar ngIf

<span *ngIf="variable.value; else elseBlock">{{ variable.text | SomePipe }}</span>
<ng-template #elseBlock>{{ variable.text | OtherPipe }}</ng-template>

Me resulta útil en caso de que la línea se vuelva demasiado larga.