我的目标是能够允许用户对命令列表进行排序。我正在使用Angular2 / Typescript开发应用程序。
因此,我到处寻找基于angular2的库,这些库可能提供类似于JQueryUI Sortable的可排序功能,但是找不到太多。
我碰到了这篇SO帖子,它演示了如何将JQuery与angular2集成。使用本文的一种解决方案中提供的插件,我可以使用angular2开发可排序的行为。看到这个pl。这按预期工作。
@Component({
selector: 'my-app',
directives: [SMSortable],
providers: [],
template: `
<div>
<p>This is a list that can be sorted </p>
<div sm-sortable>
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>
</div>
`
})
export class App {
constructor() {
this.name = 'Angular2'
}
}
想法是定义一个指令,该指令将使用JQueryUI sortable()API将可排序行为应用于本机元素。然后在组件的模板中使用指令。
@Directive({
selector: "[sm-sortable]"
})
export class SMSortable{
constructor(el: ElementRef) {
jQuery(el.nativeElement).sortable( {
start: function(event, ui) {
console.log("Old position: " + ui.item.index());
},
stop: function(event, ui) {
console.log("New position: " + ui.item.index());
}
});
}
}
当组件的模板具有所有本机元素时,此方法效果很好。但是,如果我的模板具有自定义的angular2组件,则它将停止工作。
看到这不起作用的朋克。
@Component ({
selector: 'sm-cmd',
template: '<ng-content></ng-content>'
})
export class SMCommand {
}
@Component({
selector: 'my-app',
directives: [SMSortable, SMCommand],
providers: [],
template: `
<div>
<p>This is a list that can be sorted </p>
<div sm-sortable>
<sm-cmd><p>Item 1</p></sm-cmd>
<sm-cmd><p>Item 2</p></sm-cmd>
<sm-cmd><p>Item 3</p></sm-cmd>
</div>
</div>
`
})
export class App {
}
在这种情况下,我可以拖动该项目,但不能将其删除。已移动的项目将还原到其原始位置。我添加了console.log来查看排序期间开始和停止事件的项目索引。该值保持不变。
我无法对此进行进一步调试。有人可以为此提供一些意见吗?
问题实际上非常简单:由于您正在使用自定义元素,因此sm-cmd
浏览器不知道要使用哪种渲染模型(块或内联)。默认情况下,它应用内联代码一,这会导致元素尺寸方面的冲突,因为您p
在inline中具有块级sm-cmd
。因此,浏览器无法正确计算块尺寸。
因此解决方案是以下简单的CSS规则:
sm-cmd {display: block;}
还要确保您在ngAfterViewInit钩子中初始化jQuery插件:
@Directive({
selector: "[sm-sortable]"
})
export class SMSortable{
constructor(private el: ElementRef) {}
ngAfterViewInit() {
jQuery(this.el.nativeElement).sortable( {
start: function(event, ui) {
console.log("Old position: " + ui.item.index());
},
stop: function(event, ui) {
console.log("New position: " + ui.item.index());
}
});
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句