将 Dragular 添加到 Angular2 应用程序：未定义文档

Question

我对 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 和组件文件 sn-ps（... 表示汇总代码）：

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)。

Answer 1

您的 DragulaService 初始化错误！！查看 Dragula 文档link

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
  }