0

我对 Angular2 还很陌生，我在将 Dragula 添加到我的应用程序时遇到了问题。当我运行应用程序时，在加载主页之前会引发错误：

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: document is not defined

错误消息提到 Prerending，我怀疑这与使用asp-prerender-module.

我尝试遵循 Dragula 和论坛帖子的官方教程。下面是我的 app.module 和组件文件片段（... 表示汇总代码）：

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
...
import { SearchComponent } from './components/search/search.component';

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Injectable } from '@angular/core';
import { DragulaModule } from 'ng2-dragula';


@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        ...
        SearchComponent
    ],
    imports: [
        UniversalModule,
        BrowserModule,
        FormsModule,
        DragulaModule,
        CommonModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            ...
            { path: 'search', component: SearchComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}

search.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { SearchService } from '../../services/search.service';
import { DragulaService } from 'ng2-dragula';

@Component({
    selector: 'search',
    template: require('./search.component.html'),
    providers: [SearchService, DragulaService]
})

我怀疑在包含 Dragula 时我错过了一步，但我不知道在哪里。我在 package.json 文件中包含了dragula (^3.7.2)和ng2-dragula (^1.3.0)。

4

1 回答 1

0

您的 DragulaService 初始化错误！检查 Dragula 文档 链接

search.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { SearchService } from '../../services/search.service';
import { DragulaService } from 'ng2-dragula';

@Component({
    selector: 'search',
    template: require('./search.component.html'),
    providers: [SearchService]
})

expoert searchcomponent{
constructor(private dragulaService: DragulaService) {
        console.log('DragulaService created');
}
}

现在你可以玩拖放了

如果您想对拖放进行更多控制，您可以向 dragulaService 添加事件和选项。

constructor(private dragulaService: DragulaService) {
    dragulaService.drag.subscribe((value) => {
      console.log(`drag: ${value[0]}`);
      this.onDrag(value.slice(1));
    });
    dragulaService.drop.subscribe((value) => {
      console.log(`drop: ${value[0]}`);
      this.onDrop(value.slice(1));
    });
    dragulaService.over.subscribe((value) => {
      console.log(`over: ${value[0]}`);
      this.onOver(value.slice(1));
    });
    dragulaService.out.subscribe((value) => {
      console.log(`out: ${value[0]}`);
      this.onOut(value.slice(1));
    });
  }

  private onDrag(args) {
    let [e, el] = args;
    // do something
  }

  private onDrop(args) {
    let [e, el] = args;
    // do something
  }

  private onOver(args) {
    let [e, el, container] = args;
    // do something
  }

  private onOut(args) {
    let [e, el, container] = args;
    // do something
  }
于 2017-04-28T15:13:40.023 回答