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

Question

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

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

注意：我的应用程序被分成几个页面/组件，我正在实现该接口 (Trello) 的页面被称为BoardPageComponent。

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

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

解决方案

当在 a 内部拖动元素时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 {
  ....
}

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

或者也许有另一种方式？

Answer 1

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

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