ng2-dnd 与 Angular 4

Posted 2023-05-08

【中文标题】ng2-dnd 与 Angular 4

【英文标题】：ng2-dnd with Angular 4

【发布时间】：2017-11-27 09:39:05

【问题描述】：

我正在尝试在 Angular 项目中实现拖放 (https://github.com/akserg/ng2-dnd)。

我的配置（ng -v）：

@angular/cli: 1.1.3
node: 6.10.1
os: win32 x64
@angular/animations: 4.2.4
@angular/common: 4.2.4
@angular/compiler: 4.2.4
@angular/core: 4.2.4
@angular/forms: 4.2.4
@angular/http: 4.2.4
@angular/platform-browser: 4.2.4
@angular/platform-browser-dynamic: 4.2.4
@angular/router: 4.2.4
@angular/cli: 1.1.3
@angular/compiler-cli: 4.2.4
@angular/language-service: 4.2.4

我的步骤：

创建新项目：ng new myProject --style=sass 安装 ng2-dnd：npm install ng2-dnd --save 在我的NgModule中导入DndModule：

---

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  AppComponent  from './app.component';
import  DndModule  from 'ng2-dnd';

@NgModule(
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DndModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
)
export class AppModule  

从 node_modules 导入 style.css

在这一步之后，我添加了一个模板，就像在 github 上一样，但没有结果。我只看到纯文本，即使没有样式。

我做错了什么？

【问题讨论】：

你能把你的 repo 发布到 github 上吗？

你在哪里导入样式？

我在 angular-cli.json 中导入了样式，这是我的代码：github.com/pawelidziak/my-todo-list

拖放功能是否有效？换句话说，唯一的问题是缺乏样式吗？

【参考方案1】：

你应该在 angular-cli.json 中导入样式

 "styles": [
        "../node_modules/ng2-dnd/style.css",
      ],