向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的项目有关的Prerending。

我试着跟随来自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)。

Answer 1

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