gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved grammar and corrected spelling. (#23464)

Browse Source 
Changed every `Tubo` word back to pipe since this name may not be translated for latter studies. An student'll never find anything in the web named as `Tubo`.
This commit is contained in:
Gabriel Barreto
2019-08-14 12:11:02 -03:00
committed by Randell Dawson
parent 1791f8a006
commit bfa8be1268
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
guide/portuguese/angular/pipes/index.md
View File

@ -1,26 +1,26 @@
--- ---
title: Pipes title: Pipes
localeTitle: Tubos localeTitle: Pipes
--- ---
# Tubos # Pipes
#### Motivação #### Motivação
Transformações de dados de saída. Eles garantem que os dados estejam em um formato desejável no momento em que são carregados na tela do usuário. Normalmente, os dados se transformam nos bastidores. Com pipes, a transformação de dados pode ocorrer no modelo HTML. Os pipes transformam os dados do modelo diretamente. Transformações de dados na saída garantem que os dados estejam em um formato desejável no momento em que são exibidos na tela do usuário. Normalmente, os dados se transformam nos bastidores. Com _pipes_ a transformação de dados pode ocorrer no modelo HTML. Os _pipes_ transformam os dados do modelo diretamente.
Os tubos têm uma boa aparência e são convenientes. Eles ajudam a manter a classe do componente enxuta de transformações básicas. Para colocá-lo tecnicamente, os encapsulamentos encapsulam a lógica de transformação de dados. Os _pipes_ têm uma boa aparência, são convenientes e ajudam a manter a classe do componente enxuta de transformações básicas. Tecnicamente, os _pipes_ a lógica de transformação de dados para exibição.
#### Transformação de Saída #### Transformação de Saída
Conforme mencionado na seção anterior, os pipes transformam os dados inline. A sintaxe de pipes correlaciona scripts de shell. Em muitos scripts, a saída de uma parte do comando é _canalizada_ como saída para a próxima parte como entrada. Essa mesma tendência caracteriza os tubos angulares. Conforme mencionado na seção anterior, os pipes transformam os dados _inline_. A sintaxe de pipes correlaciona scripts de shell. Em muitos scripts, a saída de uma parte do comando é "canalizada" como saída para servir de entrada a próxima parte do _script_. Essa mesma tendência caracteriza os _pipes_ do Angular.
Em Angular, existem muitas maneiras de interagir com dados no modelo HTML. Os pipes podem ser aplicados em qualquer lugar em que os dados sejam analisados ​​no HTML do modelo. Eles podem ocorrer dentro da lógica microsyntax e das interpolações de variáveis ​​innerHTML. Os canos respondem por todas as transformações sem adicionar à classe do componente. Em Angular, existem muitas maneiras de interagir com dados no modelo HTML. Os _pipes_ podem ser aplicados em qualquer lugar em que os dados sejam analisados no HTML do modelo. Eles podem ocorrer dentro da lógica das interpolações de variáveis. Os _pipes_ respondem por todas as transformações sem recorrer à classe do componente para tal feito.
Tubos também são _correntes_ . Você pode integrar pipes um após o outro para executar transformações cada vez mais complexas. Como transformadores de dados especializados, os canos dificilmente são triviais. _Pipes_ também são encadeados. Você pode integrar _pipes_ um após o outro para executar transformações cada vez mais complexas. Como transformadores de dados especializados, os _pipes_ dificilmente são triviais.
#### Casos de Uso #### Casos de Uso
Angular vem pré-empacotado com um conjunto básico de tubos. Trabalhar com alguns deles desenvolverá a intuição para lidar com o resto. A lista a seguir fornece dois exemplos. Angular vem com um conjunto básico de _pipes_ e trabalhar com alguns deles desenvolverá a intuição para lidar com o restante. A lista a seguir fornece dois exemplos.
* AsyncPipe * AsyncPipe
@ -31,7 +31,7 @@ Esses dois executam tarefas simples. Sua simplicidade é extremamente benéfica.
##### AsyncPipe ##### AsyncPipe
Esta seção requer uma compreensão básica de promessas ou observáveis ​​para apreciar plenamente. O AsyncPipe opera em qualquer um dos dois. O AsyncPipe extrai dados de Promises / Observables como saída para o que vem a seguir. Esta seção requer uma compreensão básica de promessas ou observáveis para tirar um bom proveito pois o AsyncPipe opera em qualquer um dos dois. O AsyncPipe extrai dados de Promises / Observables como saída para o que vem a seguir.
No caso do Obervables, o AsyncPipe assina automaticamente a fonte de dados. Independentemente de onde os dados vêm, o AsyncPipe se associa à fonte observável. `async` é o nome sintático do AsyncPipe, conforme mostrado abaixo. No caso do Obervables, o AsyncPipe assina automaticamente a fonte de dados. Independentemente de onde os dados vêm, o AsyncPipe se associa à fonte observável. `async` é o nome sintático do AsyncPipe, conforme mostrado abaixo.
@ -42,11 +42,11 @@ No caso do Obervables, o AsyncPipe assina automaticamente a fonte de dados. Inde
</ul> </ul>
``` ```
No exemplo, `potatoSack$` é um Observable pendente de um upload de batatas. Quando as batatas chegam, de forma síncrona ou assíncrona, o AsyncPipe as recebe como um array _iterável_ . O elemento da lista é preenchido com batatas. No exemplo, `potatoSack$` é um Observable pendente de um _upload_ de batatas. Quando as batatas chegam, de forma síncrona ou assíncrona, o AsyncPipe as recebe como um array iterável e o elemento da lista é preenchido com o retorno de batatas.
##### DatePipe ##### DatePipe
A formatação de strings de data leva um pouco de hacking com o objeto JavaScript `Date` . O DatePipe fornece uma maneira poderosa de formatar datas, assumindo que a entrada dada é um formato de hora válido. A formatação de strings de data pode ser trabalhosa com o objeto JavaScript `Date` . O DatePipe fornece uma maneira poderosa de formatar datas, assumindo que a entrada dada é um formato de hora válido.
```typescript ```typescript
// example.component.ts // example.component.ts
@ -66,11 +66,11 @@ A formatação de strings de data leva um pouco de hacking com o objeto JavaScri
<div>Current Time: {{timestamp | date:'short'}}</div> <div>Current Time: {{timestamp | date:'short'}}</div>
``` ```
O formato do `timestamp` acima é [ISO 8601 1](https://en.wikipedia.org/wiki/ISO_8601) - não é o mais fácil de ler. O DatePipe ( `date` ) transforma o formato de data ISO em um `mm/dd/yy, hh:mm AM|PM` mais convencional `mm/dd/yy, hh:mm AM|PM` . Existem muitas outras opções de formatação. Todas essas opções estão na [documentação oficial](https://angular.io/api/common/DatePipe) . O formato do `timestamp` acima é [ISO 8601 1](https://en.wikipedia.org/wiki/ISO_8601) e não é o mais fácil de ler. O DatePipe ( `date` ) transforma o formato de data ISO em um formato mais convencional(`mm/dd/yy, hh:mm AM|PM`). Existem muitas outras opções de formatação. Todas essas opções estão na [documentação oficial](https://angular.io/api/common/DatePipe) .
#### Criando Tubulações #### Criando _Pipes_
Embora o Angular tenha apenas um número definido de pipes, o `@Pipe` decorator permite que os desenvolvedores criem seus próprios. O processo começa com `ng generate pipe [name-of-pipe]` , substituindo `[name-of-pipe]` por um nome de arquivo preferível. Este é um comando da [CLI Angular](https://cli.angular.io) . Isso produz o seguinte. Embora o Angular tenha apenas um número definido de _pipes_, o decorador `@Pipe` permite que os desenvolvedores criem seus próprios _pipes_. O processo começa com `ng generate pipe [nome-do-pipe]`, substituindo `[nome-do-pipe]` por um nome de arquivo preferível. Este é um comando da [CLI Angular](https://cli.angular.io) . Isso produz o seguinte.
```typescript ```typescript
import { Pipe, PipeTransform } from '@angular/core'; import { Pipe, PipeTransform } from '@angular/core';
@ -85,15 +85,15 @@ import { Pipe, PipeTransform } from '@angular/core';
} }
``` ```
Este modelo de pipe simplifica a criação de pipe personalizado. O decorador `@Pipe` diz ao Angular que a classe é um pipe. O valor do `name: 'example'` , neste caso sendo `example` , é o valor que o Angular reconhece ao varrer HTML de modelo para canais personalizados. Este modelo de _pipe_ simplifica a criação de pipe personalizado. O decorador `@Pipe` diz ao Angular que a classe é um _pipe_. O valor do `name: 'example'` , neste caso sendo `example` , é o valor que o Angular reconhece ao varrer HTML de modelo para canais personalizados.
Para a lógica de classes. A implementação do `PipeTransform` fornece as instruções para a função de `transform` . Esta função tem um significado especial dentro do contexto do decorador `@Pipe` . Ele recebe dois parâmetros por padrão. Para a lógica de classes. A implementação do `PipeTransform` fornece as instruções para a função de `transform` . Esta função tem um significado especial dentro do contexto do decorador `@Pipe` e ele recebe dois parâmetros por padrão.
`value: any` é a saída que o pipe recebe. Pense em `<div>{{ someValue | example }}</div>` . O valor de someValue é passado para o `value: any` da função de `transform` `value: any` parâmetro. Esta é a mesma função de `transform` definida na classe ExamplePipe. `value: any` é a saída que o pipe recebe. Pense em `<div>{{ someValue | example }}</div>` . O valor de someValue é passado para o `value: any` da função de `transform`. Esta é a mesma função de `transform` definida na classe ExamplePipe.
`args?: any` é qualquer argumento que o pipe receba opcionalmente. Pense em `<div>{{ someValue | example:[some-argument] }}</div>` . `[some-argument]` pode ser substituído por qualquer valor. Este valor é passado para o parâmetro `args?: any` da função de `transform` `args?: any` . Ou seja, a função de `transform` definida na classe ExamplePipe. `args?: any` é qualquer argumento que o pipe receba opcionalmente. Pense em `<div>{{ someValue | example:[algum-argumento] }}</div>` . `[algum-argumento]` pode ser substituído por qualquer valor. Este valor é passado para o parâmetro `args?: any` da função de `transform`, ou seja, a função de `transform` definida na classe ExamplePipe.
O que quer que a função retorne ( `return null;` ) se torna a saída da operação do pipe. Dê uma olhada no próximo exemplo para ver um exemplo completo de ExamplePipe. Dependendo da variável que o pipe recebe, ele coloca em maiúsculas ou minúsculas a entrada como nova saída. Um argumento inválido ou inexistente fará com que o pipe retorne a mesma entrada como saída. O que quer que a função retorne ( `return null;` ) se torna a saída da operação do pipe. Dê uma olhada no próximo exemplo para ver um exemplo completo de ExamplePipe. Dependendo da variável que o _pipe_ recebe, ele coloca em maiúsculas ou minúsculas a entrada como nova saída. Um argumento inválido ou inexistente fará com que o pipe retorne a mesma entrada como saída.
```typescript ```typescript
// example.pipe.ts // example.pipe.ts
@ -140,21 +140,21 @@ O que quer que a função retorne ( `return null;` ) se torna a saída da opera
<h6>{{ someValue | example:'lowercase' }}</h6> <h6>{{ someValue | example:'lowercase' }}</h6>
``` ```
Compreender o exemplo acima significa que você entende os tubos angulares. Há apenas mais um tópico para discutir. Compreender o exemplo acima significa que você entende os _pipes_ angulares. Há apenas mais um tópico para discutir.
#### Tubulações Puras e Impuras #### Tubulações Puras e Impuras
Tudo o que você viu até agora foi um tubo _puro_ . `pure: true` é definido por padrão nos metadados do `@Pipe` decorator. A diferença entre os dois constitui a detecção de alterações do Angular. Tudo o que você viu até agora foi um tubo _puro_ . `pure: true` é definido por padrão nos metadados do `@Pipe` decorator. A diferença entre os dois constitui a detecção de alterações do Angular.
Os pipes puros são atualizados automaticamente sempre que o valor de sua entrada derivada é alterado. O pipe será reexecutado para produzir nova saída após uma alteração detectável no valor de entrada. As alterações detectáveis ​​são determinadas pelo loop de detecção de alterações do Angular. Os _pipes_ puros são atualizados automaticamente sempre que o valor de sua entrada derivada é alterado. O pipe será reexecutado para produzir nova saída após uma alteração detectável no valor de entrada. As alterações detectáveis são determinadas pelo loop de detecção de alterações do Angular.
Os tubos Impure são atualizados automaticamente sempre que ocorre um ciclo de detecção de alteração. A detecção de alterações do Angular acontece com bastante frequência. Ele indica se ocorreram mudanças nos dados dos membros da classe do componente. Em caso afirmativo, o modelo HTML é atualizado com os dados atualizados. Caso contrário, nada vai acontecer. Os _pipes_ Impure são atualizados automaticamente sempre que ocorre um ciclo de detecção de alteração. A detecção de alterações do Angular acontece com bastante frequência. Ele indica se ocorreram mudanças nos dados dos membros da classe do componente. Em caso afirmativo, o modelo HTML é atualizado com os dados atualizados. Caso contrário, nada vai acontecer.
No caso de um pipe impuro, ele será atualizado independentemente de haver uma alteração detectável ou não. Um pipe impuro é atualizado sempre que os loops de detecção de alterações são alterados. Tubos impuros geralmente consomem muitos recursos e geralmente são mal aconselhados. Dito isto, eles operam mais como uma escotilha de escape. Se você precisar de um `@Pipe` sensível à detecção, alterne `pure: false` nos metadados do `@Pipe` decorator. No caso de um pipe impuro, ele será atualizado independentemente de haver uma alteração detectável ou não. Um pipe impuro é atualizado sempre que os loops de detecção de alterações são alterados. _Pipes_ impuros geralmente consomem muitos recursos e geralmente são mal aconselhados. Dito isto, eles operam mais como uma escotilha de escape. Se você precisar de um `@Pipe` sensível à detecção, alterne `pure: false` nos metadados do `@Pipe` decorator.
#### Conclusão #### Conclusão
Isso cobre cachimbos. Os tubos têm muito potencial além do escopo deste artigo. Os Pipes contribuem com transformações de dados sucintas para o HTML do modelo de seus componentes. Eles são uma boa prática em situações em que os dados precisam passar por pequenas transformações. Isso cobre cachimbos. Os _pipes_ têm muito potencial além do escopo deste artigo. Os Pipes contribuem com transformações de dados sucintas para o HTML do modelo de seus componentes. Eles são uma boa prática em situações em que os dados precisam passar por pequenas transformações.
## Fontes ## Fontes
@ -164,5 +164,5 @@ Isso cobre cachimbos. Os tubos têm muito potencial além do escopo deste artigo
* [Documentação Angular](https://angular.io/guide/pipes) * [Documentação Angular](https://angular.io/guide/pipes)
* [Repositório Angular GitHub](https://github.com/angular/angular) * [Repositório Angular GitHub](https://github.com/angular/angular)
* [Lista de Tubos Pré-embalados com Angular](https://angular.io/api?query=pipe) * [Lista de Pipes Pré-embalados com Angular](https://angular.io/api?query=pipe)
* [CLI Angular](https://cli.angular.io) * [CLI Angular](https://cli.angular.io)