Ionic 2，在 iOS 上使用 Angular 2 管道中断—“找不到变量：Intl”答案

【问题标题】：Ionic 2, Using Angular 2 Pipe breaks on iOS—"Can't find variable: Intl"Ionic 2，在 iOS 上使用 Angular 2 管道中断—“找不到变量：Intl”
【发布时间】：2016-05-03 05:59:48
【问题描述】：

在模板中使用日期、百分比和货币管道时遇到同样的问题—

例如，我使用的是简单的百分比管道：

{{ .0237| percent:'1.2-2' }}

在 Chrome 上运行时它可以工作，但是当我部署到 iOS 设备时，它会抛出此错误：

“例外：ReferenceError：找不到变量：Intl in [{{ {{ .0237| percent:'1.2-2' }} ...”

还有其他人遇到过这个问题吗？任何建议或帮助将不胜感激！谢谢！

【问题讨论】：

标签： ios angular ionic-framework ionic2

【解决方案1】：

这是因为它依赖于内部化 API，目前并非在所有浏览器中都可用（例如在 iOS 浏览器上不可用）。

请参阅compatibility table。

这是known issue (beta.1)。

您可以尝试使用polyfill for Intl。

为此，您可以使用 CDN 版本，并将其添加到您的 index.html：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

或者如果你使用 Webpack，你可以使用 NPM 安装 Intl 模块：

npm install --save intl

并将这些导入添加到您的应用中：

import 'intl';
import 'intl/locale-data/jsonp/en';

【讨论】：

我建议通过 npm 安装，因为如果您遇到网络问题，则无法通过 Internet 访问 polyfill，并且应用程序会显示空白屏幕
如果您使用 CLI 构建设置，请将两个导入语句添加到您的 polyfills.ts
我已经追了几天这个错误，因为我在 Safari 中发现的这个 JS 错误，ngFor 在 iOS9.3.1.1 上无法正确刷新。我可以确认@davidfischer 所说的。

【解决方案2】：

对此有一个快速修复。添加

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

到<script src="cordova.js"></script> 条目之前的 index.html 文件。

查看这个 github 答案https://github.com/angular/angular/issues/3333#issuecomment-203327903

【讨论】：

【解决方案3】：

或者另一种解决方案是自己编写这些管道。例如，对于日期，您可以使用 moment.js，或者这里是货币管道的示例：

import { Pipe, PipeTransform } from '@angular/core'

@Pipe({ name: 'currency' })

export class CurrencyPipe implements PipeTransform {
    constructor() {}

    transform(value: string, currencyString: string ) { 
        let stringOnlyDigits  = value.replace(/[^\d.-]/g, '');
        let convertedNumber = Number(stringOnlyDigits).toFixed(2);
        return convertedNumber + " " + currencyString;
    }
}

这个管道正在改变货币。百分比管道的工作方式几乎相同。正则表达式正在过滤所有数字，包括浮点数的点。

【讨论】：

【解决方案4】：

这是我对 RC3 所做的。我认为它也适用于 RC4。

输入ionic g pipe pipe-transform创建管道

清理代码以删除@Injectable。此外，使用驼峰式命名，如下所示。实现PipeTransform。

import { Pipe, PipeTransform} from '@angular/core';

/**
 * Takes a number and transforms into percentage upto
 * specified decimal places
 *
 * Usage:
 * value | percent-pipe: decimalPlaces
 *
 * Example:
 * 0.1335 | percent-pipe:2
*/
@Pipe({
  name: 'percentPipe'
})
export class PercentPipe implements PipeTransform {
  /**
   * Takes a number and returns percentage value
   * @param value: number
   * @param decimalPlaces: number
   */
  transform(value: number, decimalPlaces:number) {
    let val = (value * 100).toFixed(decimalPlaces);
    return val + '%';
  }
}

在您的app.module 中添加到declarations 数组。

然后在 html 中使用它，就像上面的示例用法一样。这是我的例子

 <ion-col *ngIf="pd.wtChg < -0.05  || pd.wtChg > 0.05" width-25 highlight>
    {{pd.wtChg | percentPipe: 2}}
  </ion-col>

请注意，我也在使用 *ngIf 和 highlight 指令，以防有人需要额外帮助。显然没有必要。

【讨论】：