Question

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

我正在Angular 2中实现一个管道来使用google-libphonenumber格式化电话号码。一切都按预期工作。我不太了解需求是如何工作的，即它就像使用现有的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打字稿，而是可以使用导入，如图所示。这也为您提供了1次导入而不是之前的2次导入。

这是在Angular 2中实现Pipe的正确方法吗？

1 个答案: