七爪源码:创建自定义角度管道（均线大于45角度变色指标公式源码）

使用参数创建一个简单的自定义 Angular 管道。 在 StackBlitz 上找到代码。

Angular 提供了内置管道来操作模板表达式中的字符串、货币金额、日期等数据。

内置管道

您可以将管道视为接收输入值并在模板表达式中返回转换后的值的基本函数，如下例所示。

<p>
  {{ pContent | titlecase }}
</p>

管道很有帮助，因为您可以在整个程序中使用它们，而不必单独声明每个管道。

您可以在 angular.io 找到内置管道的列表以及如何使用它们。

参数化管道：货币

值得一提的是，一些管道接受可选参数。

例如，CurrencyPipe 通过添加货币符号将数字转换为货币。

<p>
  {{amountText}} {{amount | currency}}
</p>

默认情况下，货币为美元。 但是，文档提到了四个不同的可选参数：

• 货币代码，例如 USD 代表美元，EUR 代表欧元。
• 显示，例如 货币指标的格式
• 数字信息
• locale，用于使用的语言环境格式规则

我们可以使用 currecyCode 将 USD 转换为 EUR

<p>
  {{amountText}} {{amount | currency:'EUR'}}
</p>

参数化管道：日期

另一个有趣的用例与日期有关。

不同的国家使用不同的日期格式。 如果您要求您的用户填写诸如生日之类的表格，您最好确保提供您想要的格式。

或者，更方便用户，您可以接受他们的输入，因为这对他们来说更常见，然后将其转换为您以后想要的格式。

使用 JavaScript 日期对象，我们可以在我们的类中获取日期

date: Date = new Date();// format: Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)

通过简单地使用我们得到的日期管道

<p>
  date: {{ date | date }}
</p>// format Feb 01, 1998

我们可以使用 fullDate 预定义格式选项来获取

<p>
  date: {{ date | date: 'fullDate' }}
</p>// format Sunday, February 01, 1998

有时，内置管道是不够的，我们需要创建自定义管道。

异步管道

可能是最常用的 Angular 管道之一！

Angular 异步管道优化了更改检测并消除了手动订阅和取消订阅的需要。

<div *ngIf="numbers$ | async as numbers">  
  <p *ngFor="let n of numbers">{{ n }}</p>
</div>

定制管道

自定义管道可用于封装内置管道不支持的更改。

然后，就像使用内置管道一样，在模板表达式中使用管道将输入值更改为输出值以进行显示。

令人高兴的是，这是小菜一碟！

在下面的示例中，我将创建一个自定义缩短管。

换句话说，自定义 ShortenerPipe 可用于在将字符串显示在模板中之前将其缩短。

您可以在 Angular CLI 中使用 ng generate pipe 命令创建自定义管道。 但是，如果这是您的第一次，则值得花几分钟手动创建它。

通过手动创建自定义管道，您可以查看所涉及的内容以及需要在哪里导入内容。 很高兴知道何时需要调试。

创建自定义管道

以下是创建管道的步骤。

1.创建一个新文件

首先，我在 app 文件夹中创建了一个名为 shorter.pipe.ts 的文件。 .pipe.ts 扩展名是一个约定，最好遵循它。

在shortener.pipe.ts 内部，我想创建一个缩短字符串的管道。

2.创建一个类

我将从创建一个名为 ShortenerPipe 的类开始。 “使用 UpperCamelCase（类名的通用约定）作为管道类名”，angular.io。

export class ShortenerPipe {

}

现在， ShortenerPipe 类需要有一个特殊的方法才能用作管道。 虽然这不是绝对必要的，但这是另一种好的做法。

如果您使用 Angular CLI 创建管道，则会自动添加此方法。

实现 PipeTransfor 接口需要您实现相关的转换方法。

import { PipeTransform } from '@angular/core';export class ShortenerPipe implements PipeTransform {

}

3.添加装饰器

我们需要添加一个特殊的装饰器，管道装饰器。

Pipe 装饰器“将类标记为管道并提供配置元数据”。

一个有趣的元数据是管道的名称！

我们可以在 name 属性中定义管道的名称，如下所示

@Pipe({
  name: 'shortener',
})

这是我们将在模板中使用的管道的名称。

“使用 [...] camelCase 作为相应的名称字符串。 不要在名称中使用连字符”，angular.io。

4.定义逻辑

在这个文件中要做的最后一件事是定义管道的逻辑。

在我的例子中，我将只使用 transform 方法返回管道左侧字符串的前七个字符。

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'shortener',
})
export class ShortenerPipe implements PipeTransform {
   
  transform(value: string) {
    return value.slice(0, 7);
  }}

5. 在声明中导入 ShortenerPipe

最后，我们需要在 app.module.ts 声明和导入中导入 ShortenerPipe。

...
import { ShortenerPipe } from './shortener.pipe';@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent, ShortenerPipe],
  bootstrap: [AppComponent],
})export class AppModule {}

在此之后，我们终于可以使用自定义管道如下

<hello name="{{ name | shortener }}"></hello>

参数化自定义管道

我们使用 slice(0, 7) 对切片进行硬编码以获取名称输入的前七个字符。

提供定义切片的开始和结束的可能性会更好，这样我们就可以决定要保留多少个字符。

为此，我们可以将 ShortenerPipe 中的 transform 方法更改为多两个参数，即类型编号的开始和结束。

transform(value: string, start: number, end: number) {
  return value.slice(start, end);
}

在模板中，我们需要传递两个参数，如下所示：

<hello name="{{ name | shortener: 0:1 }}"></hello>

更改这些参数将根据需要缩小 name 属性。

您可以在 StackBlitz 上找到包含所有示例的代码。

最后的评论

这里介绍的所有管道都是纯管道，除了异步管道。

在某些情况下，您可能想要创建不纯的管道。 但是，您应该注意潜在的性能和缩小问题。