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

【问题标题】：Is this the correct way to implement a Pipe in Angular 2这是在 Angular 2 中实现管道的正确方法吗
【发布时间】：2017-10-26 21:14:52
【问题描述】：

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

我正在 Angular 2 中实现一个管道来使用 google-libphonenumber 格式化电话号码。一切都按预期工作。我对 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);
    }
}

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

【问题讨论】：

我已将其标记为重复，因为基本上您要问的是如何使用 Angular 的 3rd 方库
不确定为什么会重复。我的代码已经在工作了。我只想知道是否应该将要求保留在外部或不优化代码。
哦，我没有意识到代码可以正常工作，我的错。我正在删除骗子。不过，如果您检查了链接，它会为您提供有关如何在项目中使用 3rd 方库的信息..
这个require 来自哪里？你用什么 - angular-cli，systemjs？
网页包。我将google-libphonenumber 包含在vendor.ts 中

标签： javascript angular requirejs angular2-pipe angular-pipe

【解决方案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 次。

【讨论】：