Я публикую этот вопрос просто для того, чтобы ответить на него сам, если кто-то изо всех сил пытается, как я!
Я работаю над проектом angular для реализации приложения, подобного Trello. Я хочу иметь возможность перетаскивать элемент из одного списка в другой, поэтому я установил модуль Angular cdk и следовал их руководству .
УВЕДОМЛЕНИЕ : мое приложение разбито на несколько страниц / компонентов, страница, на которой я реализую этот интерфейс (Trello), называется BoardPageComponent.
Сначала я добавил директиву cdkDrag, и элемент стал перетаскиваемым, что является хорошим началом!
Затем я добавил директиву cdkDropList к родительскому элементу, дочерние элементы по-прежнему можно перетаскивать, НО их стиль больше не работает, пока они перетаскиваются!
Решение
При перетаскивании элемента внутри cdDropList DragAndDropModule создает клон этого элемента, но на уровне тела документа. Поэтому, если ваш компонент инкапсулирован, то его стиль не будет применяться!
Решение 1: Одним из быстрых решений было бы просто переместить стиль этого перетаскиваемого элемента и поместить его в глобальный стиль. файл.
Решение 2: Другим решением будет отключение инкапсуляции этого компонента с помощью ViewEncaplusation.None:
@Component({
selector: 'app-board-page',
templateUrl: './board-page.component.html',
styleUrls: ['./board-page.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class BoardPageComponent implements OnInit, OnDestroy {
....
}
Это будет работать, но вы должны знать, что это может протекать какой-то стиль другим компонентам вашего приложения. Поэтому обязательно инкапсулируйте стиль компонента вручную.
Или, может быть, есть другой способ ??