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时错过了一步，但我无法弄清楚在哪里。我在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
  }

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

1 个答案: