使用 cdkDropList 时元素样式不适用（角度 cdk 拖放）

Posted 2023-03-06

【中文标题】使用 cdkDropList 时元素样式不适用（角度 cdk 拖放）

【英文标题】：Element style doesn't apply when using cdkDropList (Angluar cdk drag and drop)

【发布时间】：2020-08-16 23:12:41

【问题描述】：

我发布这个问题只是为了自己回答，以防有人像我一样挣扎！

我正在开发一个 Angular 项目来实现类似 Trello 的应用程序。我希望能够将一个元素从一个列表拖到另一个列表中，所以我安装了 Angular cdk 模块并关注their guide。

注意：我的应用程序分为几个页面/组件，我正在实现该接口 (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 
  ....

这会起作用，但您应该注意，这可能会将某些样式泄漏到应用程序的其他组件中。所以一定要手动封装组件的样式。

或者也许还有其他方法？？

【参考方案1】：

在您的 scss 文件中，在主机 ng 深度选择器中添加特定的 css

:host ::ng-deep h2 
    color: red;
 

【参考方案2】：

我遇到了同样的问题：拖动的元素没有样式。是的，可能还有其他方法。

在保持默认 ViewEncapsulation.Emulated 的同时，我的解决方案是确保我的组件的 CSS 没有过度限定（例如，在 draggable 的路径中具有可拖动父级的选择器可能过于具体）。

使用.cdk-drag-preview 对我很有帮助。