Question

我想在我的Angular4应用中使用ng2-dnd来创建可排序列表。自述文件中有一个示例＆＃34;添加句柄来限制组件的可拖动区域＆＃34;但是如果我尝试运行它，我会收到此错误：

Error: StaticInjectorError(AppModule)[DraggableHandleComponent -> DraggableComponent]: 
  StaticInjectorError(Platform: core)[DraggableHandleComponent -> DraggableComponent]: 
    NullInjectorError: No provider for DraggableComponent!

如何提供该组件？自述文件中没有提到它。如果我从元素中删除dnd-draggable-handle属性，我只能避免错误。

这是示例代码：

import {Component} from '@angular/core';

@Component({
    selector: 'simple-dnd-handle',
    template: `
<h4>Simple Drag-and-Drop with handle</h4>
<div class="row">
    <div class="col-sm-3">
        <div class="panel panel-success">
            <div class="panel-heading">Available to drag</div>
            <div class="panel-body">
                <div class="panel panel-default" dnd-draggable [dragEnabled]="true">
                    <div class="panel-body">
                        <div>
                            <span dnd-draggable-handle>=</span>&nbsp;
                            Drag Handle
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div dnd-droppable class="panel panel-info" (onDropSuccess)="simpleDrop=$event">
            <div class="panel-heading">Place to drop</div>
            <div class="panel-body">
                <div *ngIf="simpleDrop">Item was dropped here</div>
            </div>
        </div>
    </div>
</div>`
})
export class SimpleDndHandleComponent {
    simpleDrop: any = null;
}

Answer 1

dnd-draggable-handle必须位于dnd-droppable元素的children元素中。在你的情况下，dnd-droppable-handle在外面。

在Angular4中为可排序元素添加句柄（ng2-dnd）

1 个答案: