在Angular2应用程序中添加Dragular:未定义文档

Question

我对Angular2是相当新的，并且在将Dragula添加到我的应用程序中遇到了问题。当我运行应用程序时，在加载主页之前会丢下错误：

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

错误消息提到了我怀疑使用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的情况下，我错过了一个步骤，但我无法弄清楚哪里。我已经在我的poffage.json file.json file。

您的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
  }