9

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

我正在开发一个 Angular 项目来实现类似 Trello 的应用程序。我希望能够将一个元素从一个列表拖到另一个列表中，因此我安装了 Angular cdk 模块并按照他们的指南进行操作。

在此处输入图像描述

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

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

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

解决方案

在 acdkDropList中拖动元素时，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 {
  ....
}

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

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

4

2 回答 2

2

我有同样的问题：拖动的元素没有样式。是的，可能还有另一种方式。

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

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

于 2021-09-01T20:16:40.843 回答
1

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

:host ::ng-deep h2 {
    color: red;
 }
于 2020-05-02T13:22:57.370 回答