这是在 Angular 2 中实现管道的正确方法吗

Question

我正在使用 Webpack 开发 Angular 2 应用程序。

我正在 Angular 2 中实现一个管道，使用 google-libphonenumber 来格式化 phone 数字。一切都按预期工作。我不太了解 require 是如何工作的，即，它就像使用现有的 JS 函数或加载一个库来执行昂贵的操作一样简单。所以我不确定我是否必须在下面的示例中定义 PNF 和 phoneUtil，在管道中的 transform 函数之外。

export class PhonePipe implements PipeTransform {
    transform(value: string) {
        let PNF = require('google-libphonenumber').PhoneNumberFormat;
        // Get an instance of `PhoneNumberUtil`.
        let phoneUtil = require('google-libphonenumber').PhoneNumberUtil.getInstance();
        // Add a leading '+' sign if not available. Assumption is all numbers contain country code prefixed.
        let newValue = value.length > 0 && value.charAt(0) != "+" ? "+" + value : value;
        // Format the number.
        let parsedPhoneObj = phoneUtil.parse(newValue, 'US');
        console.log(parsedPhoneObj);
        return phoneUtil.format(parsedPhoneObj, PNF.INTERNATIONAL);
    }
}

将不胜感激任何建议。我的目标是优化应用程序性能。

Answer 1

我会做：

import * as libphonenumber from 'google-libphonenumber';

export class PhonePipe implements PipeTransform {
    transform(value: string) {

        let PNF = libphonenumber.PhoneNumberFormat;

        // Get an instance of `PhoneNumberUtil`.
        let phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();

        // Add a leading '+' sign if not available. Assumption is all numbers contain country code prefixed.
        let newValue = value.length > 0 && value.charAt(0) != "+" ? "+" + value : value;

        // Format the number.
        let parsedPhoneObj = phoneUtil.parse(newValue, 'US');

        return phoneUtil.format(parsedPhoneObj, PNF.INTERNATIONAL);
    }
}

您实际上并没有将 require 与 typescript 一起使用，而是可以使用 import，如图所示。这也为您提供了 1 次导入，而不是之前的 2 次导入。

这是在 Angular 2 中实现管道的正确方法吗

Is this the correct way to implement a Pipe in Angular 2

javascript

requirejs

angular2-pipe

angular-pipe

angular