Ionic 2,在 iOS 上使用 Angular 2 管道中断—“找不到变量:Intl”

Posted

技术标签:

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

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

例如,我使用的是简单的百分比管道:

 .0237| percent:'1.2-2' 

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

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

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

【问题讨论】:

【参考方案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>

&lt;script src="cordova.js"&gt;&lt;/script&gt; 条目之前的 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 指令,以防有人需要额外帮助。显然没有必要。

【讨论】:

以上是关于Ionic 2,在 iOS 上使用 Angular 2 管道中断—“找不到变量:Intl”的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Ionic3 angular4 混合应用程序构建为 ios .ipa 文件?

Ionic 2+,iOS 唯一问题:由于页面加载而重置插件

使用 Ionic 包装 Angular2 应用程序 - 地理定位问题

Ionic 2 构建的应用程序(IOS、Android)在启动时很慢

保存文档cordova android android ios ionic angular

ionic3 在ios12.2 12.3 12.4上页面无法滚动