Я пытаюсь реализовать что-то, используя таблицу угловых материалов, и хочу, чтобы строки можно было перетаскивать.Все работало нормально, но после того, как я начал объединять его с роутером, он перестал работать.
Я создаю проект 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, Я следовал, копировал / вставлял таблицу матов и перетаскивал код из нее всоздайте мой проект для воспроизведения.
Взгляните на app.component.html и посмотрите мой комментарий там.
В чем причина и как ее исправить (при этом все еще используя router-outletили что-то подобное, как в моем реальном проекте, таблица для перетаскивания не находится на главной странице)?
// ========= Отредактировано:
После некоторой отладки я обнаружил, что разница между использованием роутер-розетка и прямой загрузкой компонента заключается в том, что при прямой загрузке следующий фрагмент кода будет вызываться при создании страницы и не вызываться при использовании розетки-маршрутизатора.TИз-за того, что связанная переменная не инициализирована, возникла неопределенная ошибка при попытке перетаскивания.Однако я до сих пор не знаю, как это исправить.
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)
Спасибо большое!