Question

我也在使用这个样板：Download Repo

这是代码：

systemjs.config.js：

(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app':                        'app', // 'dist',
        'rxjs':                       'node_modules/rxjs',
        '@angular':                   'node_modules/@angular',
        'ng2-dragula':                'node_modules/ng2-dragula', //for ng2-dragula
        'dragula':                    'node_modules/ng2-dragula' //for ng2-dragula
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'boot.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'ng2-dragula': { main: 'ng2-dragula.js', defaultExtension: 'js' } //for ng2-dragula
    };

    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/testing',
        '@angular/upgrade'
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function(pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    };

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

app.component.ts：

import {Component} from '@angular/core';
import {Dragula, DragulaService} from 'ng2-dragula/ng2-dragula';

@Component({
    selector: 'my-app',
    directives: [Dragula],
    viewProviders: [DragulaService],
    template:`
  <div>
    <div class='wrapper'>
      <div class='container' [dragula]='"first-bag"' style="background-color:green;padding:10px;margin-bottom:20px;">
        <div>You can move these elements between these two containers</div>
        <div>Moving them anywhere else isn't quite possible</div>
        <div>There's also the possibility of moving elements around in the same container, changing their position</div>
      </div>
      <div class='container' [dragula]='"first-bag"' style="background-color:red;padding:10px;margin-bottom:20px;">
        <div>This is the default use case. You only need to specify the containers you want to use</div>
        <div>More interactive use cases lie ahead</div>
        <div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
      </div>
    </div>
  </div>
  `,
})
export class AppComponent {

}

如果您尝试拖动div，则不会发生任何事情。

我在这里错过了什么或做错了什么？

控制台：

The actually code is running via npm start ... but the console does has these error: Dragula.prototype.ngOnInit@http://localhost:3000/node_modules/ng2-dragula/src/app/directives/dragula.directive.js:40:26
anonymous/_View_AppComponent0.prototype.detectChangesInternal@AppComponent.template.js:147:88
AppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:9
DebugAppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:13
AppView.prototype.detectViewChildrenChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:220:13
AppView.prototype.detectChangesInternal@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:211:9
AppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:9
DebugAppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:13
ViewRef_.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/src/linker/view_ref.js:119:54
ApplicationRef_.prototype.tick/<@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:361:75
Call@http://localhost:3000/node_modules/es6-shim/es6-shim.min.js:10:4652
forEach@http://localhost:3000/node_modules/es6-shim/es6-shim.min.js:10:19622
ApplicationRef_.prototype.tick@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:361:13
ApplicationRef_.prototype._loadComponent@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:332:9
ApplicationRef_.prototype.bootstrap/<@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:321:13
ApplicationRef_.prototype.run/<@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:292:26
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke@http://localhost:3000/node_modules/@angular/core/src/zone/ng_zone_impl.js:45:32
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:322:20
Zone</Zone</Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:216:25
NgZoneImpl.prototype.runInner@http://localhost:3000/node_modules/@angular/core/src/zone/ng_zone_impl.js:76:60
NgZone.prototype.run@http://localhost:3000/node_modules/@angular/core/src/zone/ng_zone.js:223:51
ApplicationRef_.prototype.run@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:290:9
ApplicationRef_.prototype.bootstrap@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:312:16
coreLoadAndBootstrap/</<@http://localhost:3000/node_modules/@angular/core/src/application_ref.js:100:43
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke@http://localhost:3000/node_modules/@angular/core/src/zone/ng_zone_impl.js:45:32
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:322:20
Zone</Zone</Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:216:25
scheduleResolveOrReject/<@http://localhost:3000/node_modules/zone.js/dist/zone.js:571:53
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:356:24
NgZoneImpl/this.inner<.onInvokeTask@http://localhost:3000/node_modules/@angular/core/src/zone/ng_zone_impl.js:36:32
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:355:24
Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:256:29
drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:474:26
ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:426:22

Answer 1

试试这个：

systemjs.config：

var map =       {
    ...
    'dragula': 'node_modules/dragula/dist/dragula.js',
    'ng2-dragula': 'node_modules/ng2-dragula'
  };

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'dragula': { defaultExtension: 'js' },
    'ng2-dragula': {defaultExtension: 'js' }
  };

var config = {
    map: map,
    packages: packages  
  }`

然后导入

import {Dragula, DragulaService} from 'ng2-dragula/ng2-dragula';

在@Component

directives: [Dragula], 
viewProviders: [DragulaService]

Answer 2

在地图中，dragula和ng2-dragula都指向同一位置。

'ng2-dragula':                'node_modules/ng2-dragula', //for ng2-dragula
'dragula':                    'node_modules/ng2-dragula' //for ng2-dragula

我认为这应该是 -

            'dragula': 'node_modules/dragula/dist/dragula.js',
            'ng2-dragula/*': 'node_modules/ng2-dragula/ng2-dragula.js',

看看这是否有帮助。

Angular2 NG2-Dragula没有拖拽

2 个答案: