如何在Angular2中加载XRegExp

本文介绍了如何在Angular2中加载XRegExp的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在用TypeScript编写的Angular2应用程序中使用XRegExp库.

I want to use XRegExp library in an Angular2 application written in TypeScript.

我已经将XRegExp安装为node.js模块.

I have installed XRegExp as a node.js module.

如何让var unicodeWord = XRegExp("^\\pL+$");在组件方法中工作?

How do I get var unicodeWord = XRegExp("^\\pL+$"); to work in a component method?

(如何在TypeScript中引用JS库?如何在angular中加载node.js模块?)

(How do I reference the JS library in TypeScript? How do I load the node.js module in angular?)

更新

typings.json:

{
    "ambientDependencies": {
        "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2",
        "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#d594ef506d1efe2fea15f8f39099d19b39436b71",
        "xregexp": "github:DefinitelyTyped/DefinitelyTyped/xregexp/xregexp.d.ts"
    }
}

我的index.html中的

<head>标记:

<head> tag in my index.html:

<head>
    <title>Amadeus</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            paths: {
                xregexp: 'node_modules/xregexp/src/xregexp.js'
            },
            packages: {        
                angular_components: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });

        System.import('angular_components/ignition')
            .then(null, console.error.bind(console));
    </script>

</head>

ignition.ts:

import {bootstrap}    from 'angular2/platform/browser'
import {AmadeusComponent} from './amadeus/amadeus.component'

bootstrap(AmadeusComponent);

amadeus.component.ts:

import {Component} from 'angular2/core';
import {XRegExp} from 'xregexp';

@Component({
    selector: 'amadeus',
    templateUrl: 'angular_components/amadeus/amadeus.component.ahtml'
})

export class AmadeusComponent {

    constructor(){
        console.log(XRegExp); // undefined
    }

}

推荐答案

您可以通过以下方式进行操作:

You can do this in the following way:

在package.json中添加'typings'作为dev依赖项，并(可选)后安装操作:

In your package.json add 'typings' as dev dependency, and (optionally) postinstall action:

"devDependencies": 
{
    "typings": "latest"
},
"scripts": 
{
    "postinstall": "typings install --save"
}

将具有以下内容的Types.json文件添加到您的根文件夹中:

Add typings.json file with the following content to your root folder:

{
  "ambientDependencies": {
    "xregexp": "github:DefinitelyTyped/DefinitelyTyped/xregexp/xregexp.d.ts"
  }
}

然后在控制台中导航到项目根目录(package.json，tsconfig.json等所在的位置)并运行

Then navigate in console to your project root (where your package.json, tsconfig.json, etc are) and run

这将为您提供xregexp库的打字稿定义.

this will get you typescript definitions for xregexp library.

不要忘记使用tsconfig文件中的exclude部分来排除浏览器(或主要)定义，如下所示:

Do not forget to exclude browser (or main) definitions using exclude section in your tsconfig file like this:

{ 
    "compilerOptions": { 
        "emitDecoratorMetadata": true, 
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "module": "commonjs", 
        "target": "es6",
        "sourceMap": true,
        "outDir": "bin",
        "declaration": true
    },
    "exclude": [
        "node_modules",
        "typings/browser.d.ts",
        "typings/browser/**"
    ]
}

在您的systemjs配置中:

In your systemjs config:

    System.config({
        paths: {
            xregexp: 'path/to/xregexp.js'
        }             
    });

    System.defaultJSExtensions = true;

然后使用它:

import XRegExp = require('xregexp');

希望这会有所帮助.

这篇关于如何在Angular2中加载XRegExp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！