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

Posted 2023-01-15

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

我正在研究一个有角度的项目，以实现类似Trello的应用程序。我希望能够将一个元素从一个列表拖到另一个列表，因此我安装了Angular cdk模块并遵循their guide。

NOTICE：我的应用程序分为几个页面/组件，我正在实现该页面的页面（Trello）称为BoardPageComponent。

首先，我添加了cdkDrag指令，该元素变得可拖动，这是一个很好的开始！

然后我将cdkDropList指令添加到了父元素，子元素仍然是可拖动的，但是它们的样式在被拖动时不再起作用！

解决方案

[将元素拖到cdDropList内时，DragAndDropModule创建该元素的克隆，但在文档的正文级别。因此，如果您的组件被封装，那么它的样式将不适用！

一种快速的解决方案是仅移动该可拖动元素的样式并将其放入全局样式文件中。

另一种解决方案是使用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 
  ....

这将起作用，但是您应该意识到，这可能会将某些样式泄漏给应用程序的其他组件。因此，请确保手动封装组件的样式。

或者也许还有另一种方式？

答案

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

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