问题
I am trying to implement something using Angular Material table, and want to make the rows drag-drop-able. Everything worked fine but after I started to combine it with router-outlet, it stopped working.
I create a stackblitz project (https://stackblitz.com/edit/angular-cdkdrag-table-row) that can reproduce the problem. Please open the debug console and you will see the following error message as soon as you try to drag a 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)
Credit to https://stackblitz.com/edit/angular-igmugp, I followed and copied/pasted the mat-table and drag/drop code from it to create my project for the repro.
Take a look at app.component.html and see my comment in there.
What's the cause and how to fix it (while still using router-outlet or something similar, as in my real project, the table to be drag/drop is not on the home page)?
// ========= Edited:
After some debugging, I found that the difference between using router-outlet vs loading the component directly is that when loading it directly, the following piece of code will be called when the page is created and it is not called when using router-outlet. That caused the related variable not initialized hence it got the undefined error when trying to drag/drop. However, I still don't know how to fix it yet.
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; }));
});
};
This is the call stack when the above function is called:
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)
Thank you very much!
来源：https://stackoverflow.com/questions/55964624/angular-cdkdrag-of-material-table-rows-not-working-with-router-outlet