Pipes

Π­Ρ‚ΠΎ инструмСнты ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ… Π² ΡˆΠ°Π±Π»ΠΎΠ½Π°Ρ…

<div>
    <p>{{ someObj | json }}</p>
    <p>{{ someDate | date }}</p>
</div>

Найти ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΏΠΎ ΠΏΠ°ΠΉΠΏΠ°ΠΌ, ΠΈΡ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ API, ΠΎΡ‚Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ²Π°Π² ΠΏΠΎ полю Type = Pipe.

Create

МоТно ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои ΠΏΠ°ΠΉΠΏΡ‹. НапримСр:

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

@Pipe({name: 'myPipe'})
export class MyTestPipe implements PipeTransform {
    transform(value: number, exponent = 1): number {
        return Math.pow(value, exponent);
    }
}
<p>Super power boost: {{2 | myPipe: 10}}</p>

Pure and inpure pipes

Π•ΡΡ‚ΡŒ Ρƒ Pipe Ρ„Π»Π°Π³ pure. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, всС pipes ΠΈΠΌΠ΅ΡŽΡ‚ значСния pure=true. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠΉ pipe отслСТиваСт измСнСния Ρ‚ΠΎΠ»ΡŒΠΊΠΎ простых Ρ‚ΠΈΠΏΠΎΠ². Если ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ„Π»Π°Π³ pure=false, Π½ΠΎ pipe Π½Π°Ρ‡Π½Π΅Ρ‚ ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒ измСнСния слоТных ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, массивов), Π½ΠΎ Π² этом случаС ΠΌΡ‹ просядСм ΠΏΠΎ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

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

@Pipe({
    name: 'myPipe',
    pure: false
})
export class MyInpurePipe implements PipeTransform {
    ...
}

Last updated