将Dragular添加到Angular2应用程序:文档未定义
问题描述:
我对Angular2相当新,并且遇到了将Dragula添加到我的应用程序的问题。当我运行应用程序错误加载主页之前抛出:将Dragular添加到Angular2应用程序:文档未定义
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)。
答
你的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
}
您是否已解决此问题?我与ng2-dragula模块有同样的问题。 –
我发现此问题的修复程序:http://*.com/questions/40257514/call-to-node-module-failed-with-errors-with-angular2-asp-net –