Question

我有一个带有行的时间轴，我想在时间轴的行之间移动项目。为此，我使用了angular-cdk拖放，每一行都是一个cdkDropList。当在不同列表之间移动线条时，我想保留所放置项目的原始样式，但是在将该项目放置到另一个列表中之后，该项目将采用其他列表中项目的样式。如果要在同一列表中移动项目，则可以更改项目的样式。

我设置了一个堆叠闪电战：https://stackblitz.com/edit/angular-opuyuk

您可以看到，如果在列表之间移动项目，则样式会更改为列表项目，但是当在其自己的列表中移动项目时，样式可以更改。

Answer 1

你需要在TypeScript中保留styles/cssClass： [示例][1]： [1]：https://stackblitz.com/edit/angular-9vnaqy?

仅针对您的情况，您需要创建一个通用接口或类

  class theItems{
    name:String;
    styleClass:String;
  }

或者你想用动态类来处理它取决于你想如何解决 HTML 方面。

dones:theItems[]=[
    {
    name:    'Get to work',
    styleClass:"grid-column: 2/5; background-color: red;",
  },
    {
    name:    'Brush teeth',
    styleClass:"grid-column: 2/5; background-color: red;",
  },
    {
    name:    'Take a shower',
    styleClass:"grid-column: 2/5; background-color: red;",
  },
];

todos:theItems[]=[
  {
    name:     'Get to work',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
  {
    name:    'Pick up groceries',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
  {
    name:     'Go home',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
  {
    name:       'Fall asleep',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
];

预先填充数组中的对象列表并将 cdkDropListData 与所需的数组连接起来。

现在确保如果你想在打字稿中使用 css，你必须为 DOM 清理它

 safeCss(style) {
    return this.doms.bypassSecurityTrustStyle(style);
}

或者你也可以只使用 css/SCSS 类名。

最终在 Html 元素中使用经过消毒的 css：

[style]="safeCss(item.styleClass)"

随意评论您的想法，如果接受作为答案将不胜感激。

https://stackblitz.com/edit/angular-9vnaqy？

Angular CDK拖放：拖放到其他容器后保留元素样式

1 个答案: