[Web翻译]使用AngularDart的管道技巧

Sunbreak
1,111 阅读5分钟

原文地址：dart.academy/pipe-tricks…

原文作者：dart.academy/author/mont…

发布时间：2016年6月30日 - 4分钟阅读

Angular中的管道（在Angular 1.x中被称为过滤器）是一种很好的、方便的方式，可以让你的应用数据保持干净，不受视觉假象的污染，但仍然以一种有吸引力的方式将这些数据呈现给你的用户。货币就是这种情况的一个很好的例子。用户喜欢看到货币符号，比如美元符号和他们的数字， 但在内部，你的代码没有使用这些符号。你想在这些数字上做数学运算。用户也不屑于看到小数点后两位以上的货币值。有了管道，你可以让所有人都满意。

代码用Dart SDK 1.24.2和AngularDart 4.0.0测试。

Dart

Dart是一种开源的、可扩展的、面向对象的编程语言，具有强大的库和运行时，用于构建Web、服务器和移动应用。它最初由Google开发，但后来成为ECMA标准。

Dart入门

查看Dart语言之旅，了解Dart语言的速成课程。如果你已经知道JavaScript，Java，PHP，ActionScript，C/C++/C#，或其他 "大括号 "语言，你会发现Dart是熟悉的，你可以在一个小时左右的时间内使用Dart进行生产。

如果你喜欢从视频中学习，可以看看《在一个视频中学习Dart》。

获取Dart

在你进入激动人心的Dart代码编写世界之前，你需要下载Dart SDK和一个叫做Dartium的特殊浏览器，用于网络应用。

AngularDart

AngularDart是流行的Angular Web应用框架的Dart版本。目前的概念和语义几乎是相同的，但由于AngularDart是一个独立的项目，它不能保证与TypeScript版本完全保持同步。如果你想知道为什么你会想使用AngularDart而不是更主流的Angular，这里有7个原因。

快速入门

要想让AngularDart应用快速启动和运行，请尝试快速入门教程。

管道

管道基本上是一个中间变换器，它接收一个值，以某种方式对其进行操作，然后吐出新的值。Angular提供了许多现成的管道，包括用于格式化日期的管道，使字符串大写或小写，以及用于格式化百分比值的管道。你也可以创建自定义管道。

使管道可用

典型的方法是将管道的类导入到你的Angular组件中，然后将其包含在@Component decorator的pipes列表中。

lib/app_component.dart

import 'package:angular/angular.dart';

@Component(selector: 'my-app',
    templateUrl: 'app_component.html',
    pipes: const [CurrencyPipe]
)
class AppComponent {

  AppComponent();
}

如果这样声明常用的管道似乎很费劲，那么有一个技巧可以让任何一个给定组件都能使用Angular的所有管道。Angular定义了一个名为COMMON_PIPES的常量，你可以用它来一举获得所有的管道。

lib/app_component.dart

import 'package:angular/angular.dart';

@Component(selector: 'my-app',
    templateUrl: 'app_component.html',
    pipes: const [COMMON_PIPES]
)
class AppComponent {

  AppComponent();
}

有了这些，你就可以访问所有Angular的方便管道，而无需单独声明它们。

百分比管道

使用Angular内置的一个管道，让我们来看看一个例子。假设你有一个代表百分比的浮点值，称为进度，你想在视图中显示它。

lib/app_component.dart

class AppComponent {

  num progress = 0.259;

  AppComponent();
}

lib/app_component.html

<p>Total progress is: {{progress}}</p>

Angular的插值输出将是。

Total progress is: 0.259

这个输出可能会让你的用户感到困惑，因为它没有提供任何迹象表明这是一个百分比。让我们用PercentPipe来改进显示。

lib/app_component.html

<p>Total progress is: {{progress | percent}}</p>

现在显示的是这样的。

Total progress is: 25.9%

好多了! 现在很清楚我们说的是一个整体的一部分。如果我们想要更多的控制数字的显示方式呢？也许是在一个表格中，我们希望所有的数字都能很好地排列起来。

管道可以接受参数

幸运的是，Angular团队在这里没有让我们失望。像许多管道一样，PercentPipe是可以配置的。它可以取一个值，digitInfo，它允许你格式化数字的位置，包括在需要时使用padding。

lib/app_component.html

<p>Total progress is: {{progress | percent:'4.3-5'}}</p>

这里传递的参数遵循这样的模式：{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

现在你有了。

Total progress is: 0025.900%

异步管

也许你还没有你的百分比数据。它可能来自一个远程源，异步传送到你的客户端。这就是AsyncPipe的用武之地。看看这个例子，我们将AsyncPipe和PercentPipe链接起来，以显示进度。

lib/app_component.html

<p>Total progress is: {{progressStream | async | percent:'1.2-2'}}</p>

lib/app_component.dart

import 'dart:async';
import 'package:angular/angular.dart';

@Component(selector: 'my-app',
    templateUrl: 'app_component.html'
)
class AppComponent {

  Stream<num> progressStream;

  AppComponent() {
    Duration delay = new Duration(milliseconds: 500);
    progressStream = 
      new Stream.periodic(delay, (int index) => index * 0.005);
  }
}

如果你运行这段代码，你会看到随着数据被送入progressStream，该值每半秒增加0.5%。

Total progress is: 8.50%

创建自定义管道

当然，你可以创建自己的管道。管道可以自由地以任何你想要的复杂方式转换一个值，但在这个例子中，它将非常简单。它将在传递进来的任何值的末尾添加 "度 "的符号。

首先，创建管道类。

lib/degrees_pipe.dart

import 'package:angular/angular.dart';

@Pipe(name: 'degrees')
class DegreesPipe extends PipeTransform {
  String transform(val, [List args]) => "$val°";
}

然后把它告诉你的组件。对于自定义管道，你需要记得把它添加到你的@Component decorator中的管道列表中，否则你的模板将不知道你在说什么。

lib/app_component.dart

import 'package:angular/angular.dart';

import 'degrees_pipe.dart';

@Component(selector: 'my-app',
    templateUrl: 'app_component.html',
    pipes: const [DegreesPipe]
)
class AppComponent {

  num temperature = 65;

  AppComponent();
}

最后，在您的视图模板中使用它。

lib/app_component.html

<p>Temperature is: {{temperature | degrees}}</p>

而输出的。

Temperature is: 65°

结论

感谢你加入我们这一期（也可能是唯一一期）的《管子技巧》。直到下一次，使用Angular，使用Dart，并使用良好的判断。

通过www.DeepL.com/Translator（免费版）翻译

avatar
文章
阅读
粉丝