Question

我已经用两种方法实现了lodash：

方法1： 我在bower_component中安装并在组件中创建declare var _:any;。工作正常

在点击事件中，我正在调用此函数：

checkLodash(){
        _.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
          console.log(key);
        });


        let a = _.findIndex(this.users, 'active');
        console.log(a)
    }

一切正常。但我在生产中遇到了这个问题

EXCEPTION: ReferenceError: _ is not defined

我从[Lodash in angular2, declare var_:any not working

获得了一些解决方案

方法2： 在我的应用程序中没有systemjs，因为我正在使用[seed-app] [1]，所以我使用了
tsd install lodash --save 和

import * as _ from 'lodash';

我在点击事件中调用此函数

 constructor() {
        this.show_data = "hello";
        this.users = [
            { 'user': 'barney', 'active': false },
            { 'user': 'fred', 'active': false },
            { 'user': 'pebbles', 'active': true }
        ];
        _.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
            console.log(key);
        });
    }

    checkLodash() {
        _.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
            console.log(key);
        });


        let a = _.findIndex(this.users, 'active');
        console.log(a)
    }

现在我的输出是：一个 b （在console.log中）如果我点击按钮调用checkLodash函数，我收到此错误，

EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: _.findIndex is not a function
browser_adapter.js:76 TypeError: _.findIndex is not a function
    at LodashWithoutDeclare.checkLodash (lodash-without-declare.ts:31)
    at AbstractChangeDetector.ChangeDetector_LodashWithoutDeclare_0.handleEventInternal (viewFactory_LodashWithoutDeclare:75)
    at AbstractChangeDetector.handleEvent (abstract_change_detector.js:57)
    at AppView.triggerEventHandlers (view.js:221)
    at eval (viewFactory_LodashWithoutDeclare:130)
    at dom_renderer.js:282
    at dom_events.js:28
    at ZoneDelegate.invoke (angular2-polyfills.js:332)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:44)
    at ZoneDelegate.invoke (angular2-polyfills.js:331)

如何解决此问题？

Answer 1

检查你的lodash分布，我猜它不是完整的构建，只是核心。

Answer 2

tsd被诽谤。用这种方式

npm install typings -g

之前确保全局安装打字

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'lodash/**/*.js'
    ]
  });
};

然后在你的angular-cli-build.json中，确保它仍然是这样的

/** Map relative paths to URLs. */
 const map: any = {
   'lodash': 'vendor/lodash/lodash.js'
 };

 /** User packages configuration. */
 const packages: any = {
   'lodash': {
     format: 'cjs'
   }
 };

并在您的system-config.ts中：

 <script src="/vendor/lodash/lodash.js" type="text/javascript"></script>

你的src / index.html中的

添加了这一行

declare var _:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
     console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
  }
}

现在在您想要使用lodash的组件中，以这种方式编写

{{1}}

它对我有用:)

Lodash _.findIndex无法在tsd中运行lodash --save in angular2

2 个答案: