Question

管道最适合组件方法时，是否有任何规则或最佳实践？

也许类似的东西，当某些东西纯粹是一种视图逻辑并且不包含任何域逻辑时

Answer 1

基本上，当某些数据需要在模板中进行某些转换并且您不希望在组件代码中使用“脏逻辑”时，您应该考虑使用管道。

例如，假设您从服务器或其他任何地方获取了一些html字符串。并且您需要在模板中显示此字符串，但您希望将其显示为计划文本（简单字符串）而不包含任何html标记。

在这种情况下，为此创建一个管道会很好：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'htmlToPlanText'
})
export class HtmlToPlanTextPipe implements PipeTransform {
    transform(value: string) {
        let html = new String(value);
        return html.replace(/(\<(\/?[^>]+)>)/g, '');
    }
}

下一步，您可以通过以下方式在模板代码中使用它：

<span>{{yourHtmlString | htmlToPlanText}}</span>

这会将您的html字符串转换为计划文字。

请注意，这将注意更改组件控制器中的原始变量。它只会在渲染组件模板时转换值。

Answer 2

来自Angular Best Practices — August 2017 Edition

一种情况通常是订阅Observables并在准备就绪时获取值。

...
template: `
    {{myData | json}}
`)
export class XXXComponent {
    myData;
    constructor(http: HttpClient) {
        http.get('path/to/my/data/api.json')
        .subscribe(data => {
            this.myData = data;
        });
    }
}

更好的方法是在模板中使用async pip，让Angular为我们管理生命周期。如果不再需要数据，Async管道将取消HTTP请求，而不是完成，处理，然后不对其执行任何操作。

...
template: `
    {{data | async | json}}
`)
export class XXXComponent {
    data;
    constructor(http: HttpClient) {
        this.data = http.get('path/to/my/api.json');
    }
}

大多数情况下管道用于转换数据，其中一个优点是简单且链接！您可以根据具体要求进行大量组合，每个管道都可以重复使用。 <p>{{ myArray | slice:0:2 | json }}</p>

Answer 3

Pipe 将数据作为 Input 并 Transforms 将其转换为所需<强> Output 即可。

例如，在大多数用例中，用户更喜欢以简单的格式（例如 1988年4月15日）看到日期，而不是原始字符串格式 Fri 1988年4月15日00:00:00格林威治标准时间-0700（太平洋夏令时），这种显示刚出生日期的格式很难看，你可以通过Pipes来满足这一要求。

Fri Apr 15 1988 00:00:00 GMT-0700转换为April 15, 1988

何时在Angular中使用管道

3 个答案: