我正在尝试使用Angular Material表实现某些功能,并且希望使行可拖放。一切正常,但在我将其与路由器插座结合使用后,它停止了工作。
我创建了一个可以重现该问题的stackblitz项目(https://stackblitz.com/edit/angular-cdkdrag-table-row)。请打开调试控制台,当您尝试拖动一行时,您将看到以下错误消息
TypeError: Cannot read property '_getSiblingContainerFromPosition' of undefined
at DragRef._updateActiveDropContainer (drag-ref.ts:727)
at SafeSubscriber.DragRef._pointerMove [as _next] (drag-ref.ts:505)
at SafeSubscriber.__tryOrUnsub (Subscriber.ts:265)
at SafeSubscriber.next (Subscriber.ts:207)
at Subscriber._next (Subscriber.ts:139)
at Subscriber.next (Subscriber.ts:99)
at Subject.next (Subject.ts:70)
at HTMLDocument.handler (drag-drop-registry.ts:127)
at ZoneDelegate.invokeTask (zone.js:423)
at Zone.runTask (zone.js:195)
贷记到https://stackblitz.com/edit/angular-igmugp,然后跟随并复制/粘贴了mat-table,并从其中拖放了代码以创建用于复制的项目。
看看app.component.html并在那里看到我的评论。
原因是什么以及如何解决(在仍使用路由器插座或类似工具的情况下,例如在我的真实项目中,要拖放的表不在主页上)?
// =========编辑:
经过一些调试后,我发现使用router-outlet与直接加载组件之间的区别在于,直接加载组件时,以下代码将在创建页面时调用,而在使用router时不会调用-出口。这导致相关变量未初始化,因此在尝试拖放时出现未定义的错误。但是,我仍然不知道如何解决它。
CdkDropList.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._draggables.changes
.pipe(startWith(this._draggables), takeUntil(this._destroyed))
.subscribe(function (items) {
_this._dropListRef.withItems(items.map(function (drag) { return drag._dragRef; }));
});
};
这是调用上述函数时的调用堆栈:
push../node_modules/@angular/cdk/esm5/drag-drop.es5.js.DragRef._withDropContainer (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/cdk/esm5/drag-drop.es5.js:678)
(anonymous function) (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/cdk/esm5/drag-drop.es5.js:1678)
push../node_modules/@angular/cdk/esm5/drag-drop.es5.js.DropListRef.withItems (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/cdk/esm5/drag-drop.es5.js:1678)
(anonymous function) (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/cdk/esm5/drag-drop.es5.js:3434)
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subscriber.js:196)
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subscriber.js:134)
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subscriber.js:77)
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subscriber.js:54)
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subscriber.js:77)
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subscriber.js:54)
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:84)
push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/InnerSubscriber.js:15)
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subscriber.js:54)
schedulerFn (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:13505)
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subscriber.js:196)
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subscriber.js:134)
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subscriber.js:77)
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subscriber.js:54)
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (/2nd_vhd/projects/comparethem/ui/node_modules/rxjs/_esm5/internal/Subject.js:47)
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:13489)
push../node_modules/@angular/core/fesm5/core.js.QueryList.notifyOnChanges (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:18289)
checkAndUpdateQuery (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:22528)
execQueriesAction (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:23580)
checkAndUpdateView (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:23299)
callViewAction (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:23538)
execComponentViewsAction (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:23480)
checkAndUpdateView (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:23303)
callViewAction (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:23538)
execComponentViewsAction (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:23480)
checkAndUpdateView (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:23303)
callWithDebugContext (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:24167)
debugCheckAndUpdateView (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:23869)
push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:21678)
(anonymous function) (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:18109)
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:18109)
(anonymous function) (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:18000)
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (/2nd_vhd/projects/comparethem/ui/node_modules/zone.js/dist/zone.js:391)
onInvoke (/2nd_vhd/projects/comparethem/ui/node_modules/@angular/core/fesm5/core.js:17289)
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (/2nd_vhd/projects/comparethem/ui/node_modules/zone.js/dist/zone.js:390)
push../node_modules/zone.js/dist/zone.js.Zone.run (/2nd_vhd/projects/comparethem/ui/node_modules/zone.js/dist/zone.js:150)
非常感谢您!