Angular 2 – 导入外部传单打字稿库

发布时间：2020-12-17 17:58:29 所属栏目：安全来源：网络整理

导读：我试图将一个打字稿传单库导入我的角度2应用程序. 这是我的地图组件.我用tsd install安装了leaflet.d.ts,我的应用程序没有抱怨/// reference path =“../../ typings / leaflet / leaflet.d.ts”/但是当我尝试使用L.map,它是leaflet.d.ts中的导出模块时,我得

我试图将一个打字稿传单库导入我的角度2应用程序.

这是我的地图组件.我用tsd install安装了leaflet.d.ts,我的应用程序没有抱怨///< reference path =“../../ typings / leaflet / leaflet.d.ts”/>但是当我尝试使用L.map,它是leaflet.d.ts中的导出模块时,我得到错误“ReferenceError：L未定义”.这是我第一次尝试在角度2中导入外部打字稿库,显然我做错了.

/// <reference path="../../typings/leaflet/leaflet.d.ts"/>
import { Component } from 'angular2/core';
@Component({
  selector: 'map',template: `
        <div id="map"></div>
  `,})
export class Map{
    constructor(){
          var map = new L.Map('map',{
             zoomControl: false
         });
    }

的package.json

{
  "dependencies": {
    "angular2": "^2.0.0-beta.3","es6-promise": "^3.0.2","es6-shim": "^0.33.3","normalize.css": "^3.0.3","reflect-metadata": "0.1.2","rxjs": "5.0.0-beta.2","systemjs": "0.19.6","typings": "^0.6.4","zone.js": "^0.5.11"
  },"devDependencies": {
    "concurrently": "^1.0.0","gh-pages": "^0.11.0","grunt": "~0.4.5","grunt-contrib-clean": "^1.0.0","grunt-contrib-copy": "^1.0.0","grunt-contrib-cssmin": "^1.0.0","grunt-contrib-nodeunit": "~0.4.1","grunt-contrib-sass": "~0.9.0","grunt-contrib-uglify": "~0.5.0","grunt-shell": "^1.2.1","lite-server": "^2.0.1","typescript": "^1.7.5"
  },"scripts": {
    "publish": "node publish.js","tsc": "tsc","tsc:w": "tsc -w","lite": "lite-server","start": "concurrent "npm run tsc:w" "npm run lite" "
  }
}

tsd.json

{
  "version": "v4","repo": "borisyankov/DefinitelyTyped","ref": "master","path": "typings","bundle": "typings/tsd.d.ts","installed": {
    "leaflet/leaflet.d.ts": {
      "commit": "1da639a106527e0c4010b354a1efe52a3059a291"
    }
  }
}

谁能告诉我我做错了什么？

谢谢！

解决方法

您需要包含传单JS文件：

System.config({
  map: {
    leaflet: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'
  },packages: {'app': {defaultExtension: 'ts'}} 
});
System.import('app/main')
        .then(null,console.error.bind(console));

然后你可以这样在你的模块中导入它：

import {Component,OnInit} from 'angular2/core';
import leaflet from 'leaflet';

看到这个plunkr：http://plnkr.co/edit/aUo2uvlxC5ji32u01jfF?p=preview.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!