Я отправляю этот вопрос, чтобы сам на него ответить, если кто-то борется, как я!

Я работаю над проектом angular по реализации приложения, подобного Trello. Я хочу иметь возможность перетаскивать элемент из одного списка в другой, поэтому я установил модуль Angular cdk и выполнил их руководство.

ВНИМАНИЕ. Мое приложение разбито на несколько страниц / компонентов, страница, на которой я реализую этот интерфейс (Trello), называется BoardPageComponent.

Сначала я добавил директиву cdkDrag, и элемент стал перетаскиваемым, что является хорошим началом!

Затем я добавил директиву cdkDropList к родительскому элементу, дочерние элементы все еще можно было перетаскивать, НО их стиль больше не работает, пока они перетаскиваются!

Решение

При перетаскивании элемента внутри cdkDropList 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 {
  ....
}

Это будет работать, но вы должны знать, что это может привести к утечке стиля в другие компоненты вашего приложения. Поэтому обязательно инкапсулируйте стиль компонента вручную.

А может есть другой способ ??