标签: angular-cdk

我有 2 个列表（左边的首都和右边的国家）。我希望能够移动国家列表上的首都，并允许用户删除该国家的首都。问题是国家列表元素开始移动/移动（以允许插入大写）。但我只想排在首位，如果匹配，请提供一条消息并从两个列表中删除城市+国家/地区。

当我将城市元素拖到国家/地区列表元素上时，如何禁用目标国家/地区列表中的排序或元素移动？谢谢！

<div cdkDropList
     [cdkDropListData]="capitals"
     #capitalsList="cdkDropList"
     [cdkDropListConnectedTo]="countryList">
  <div cdkDrag
       (cdkDragReleased)="onDragReleased($event)"
       cdkDragBoundary=".row"
       class="bg-info text-center border p-2"
       *ngFor="let capital of capitals">{{ capital }}
  </div>
</div>


<div cdkDropList
     cdkDropListDisabled
     [cdkDropListData]="countries"
     #countryList="cdkDropList"
     [cdkDropListConnectedTo]="capitalsList"
     (cdkDropListDropped)="onDropListDropped($event)">
  <div cdkDrag
       cdkDragDisabled
       class="text-center border p-2"
       *ngFor="let country of countries">{{ country }}
  </div>
</div>

有没有办法改变 OverlayContainer？

我创建了一个工具提示组件，但有时我想将叠加层附加到特定元素（默认情况下，叠加层附加到文档正文）。

这是我创建叠加层的方式：

  private initOverlay(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions([this.resolvedConfig]);

    this.overlayRef = this.overlay.create({positionStrategy});
  }

这就是我将模板附加到它的方式：

  show(): void {
    this.overlayRef.attach(new TemplatePortal(this.tpl, this.viewContainerRef));
  }

我使用的是 Angular 10，单击后将执行以下函数来执行方向更改：

private changeHtmlDirection(direction: 'rtl' | 'ltr') {
    document.getElementsByTagName("html")[0].dir = direction;
}

它运行良好，只是 Angular CDK 没有更新。

我试图找到一个 API 来在运行时更改 Angular CDK 的方向，但没有找到。我看到有一个BidiModule，但它仅用于获取当前方向而不是设置它。

有什么解决办法吗？

我需要的初始位置cdk-virtual-scroll-viewport不是列表的第一个元素/项目。

现在我找到了scrollToIndex和scrollTo方法，但我只能在 中使用它时才能让它们工作ngAfterViewChecked，这感觉不对。

1. 有人可以确认使用这些方法ngAfterViewChecked是正确的做事方式吗？
2. 如果没有，请展示替代方法/技术？

  @ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
  numbers: number[] = [];

  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.numbers.push(index);
    }
  }

  ngAfterViewChecked() {
    this.cdkVirtualScrollViewport.scrollToIndex(2000);
  }

  <ul class="list">
    <cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
      <ng-container *cdkVirtualFor="let n of numbers">
        <li style="height:88px">{{ n }}</li>
      </ng-container>
    </cdk-virtual-scroll-viewport>
  </ul>

我发现了这个使用 angular cdk 将拖放添加到 mat-table 的 stackblitz 示例。但是，所需的行为是该行只能使用带有 cdkDragHandle 指令的元素拖动。在此示例中，您可以通过单击行上的任意位置来拖动元素。如何修改这一点，以便该行只能使用拖动手柄拖动？

https://stackblitz.com/edit/angular-igmugp

提前致谢。这是问题：

我正在使用Angular Material CDK Drag Drop（版本：@angular/ckd：7.3.7）

文档说“当元素移动时，项目会自动重新排列。 ”

我的问题是：如何防止项目在元素移动时自动重新排列？

这是我不想要的动画 gif。这是我制作的棋盘，您可以看到“随着元素（棋子）移动，项目（棋子）正在自动重新排列”

这是我想要的动画 gif。我想要的是物品（棋子）不会随着元素（棋子）移动而重新排列。

这是一个带有代码的stackblitz

我试图用来CdkConnectedOverlay在单击按钮时显示叠加层。它主要工作，但覆盖层没有在滚动时重新定位。我确定我遗漏了一些小东西，但我终生无法弄清楚。

我正在使用Angular 7.2.8和Angular CDK 7.3.3

认为这可能与缺少 cdk 样式有关（类似于此），但我导入了它们；如果样式丢失，我希望它首先不能正确显示。我的只是不会在滚动上重新定位。

模板：

<button
  (click)="isOpen = !isOpen"
  cdkOverlayOrigin
  #trigger="cdkOverlayOrigin"
>Show</button>

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen"
>
 Popover content
</ng-template>

成分：

@Component ( {
  selector: 'app-popover',
  templateUrl: './popover.component.html',
  styleUrls: [ './popover.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush,
} )
export class PopoverComponent {
  isOpen: boolean = false;
}

还有一个显示问题的 Plunkr：https ://stackblitz.com/edit/angular-7-popover

更新：

滚动重新定位问题仅在弹出框位于以overflow: auto. 如果页面溢出，那么它工作正常。您可以使用以下模板查看此行为

<div style="height: 300px; overflow-y: auto">
  <!-- Scroll re-positioning does not work when scrolling …

我想将占位符高度设置为拖动元素的高度。

现在我使用最小可能元素高度的静态高度占位符。我找不到任何有关如何执行此操作的信息，目前还不知道。

组件 HTML

<div class="taskList" cdkDropList id="{{ 'cdk-task-drop-list-' + categoryId }}" [cdkDropListData]="taskList"
[cdkDropListConnectedTo]="categoryIdList" (cdkDropListDropped)="onDrop($event)">
    <ng-container *ngIf="task.isApproved || task.authorId===userId || userAccessLevel >= 3">
        <div class="placeholder" *cdkDragPlaceholder></div>
        <div class="task">
            ...
        </div>
    </ng-container>
</div>

CSS

.placeholder{
    position: relative;
    margin-top: 1px; 
    margin-bottom: 5px;
    min-height: 75px;
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    vertical-align: middle;
}

有任何想法吗？

我正在将 CDK 覆盖添加到 mat-sidenav。当覆盖层打开时，我想阻止在 mat-sidenav 上滚动。

我创建了滚动被阻止的叠加层：

const overlayConfig = new OverlayConfig({
  scrollStrategy: this.overlay.scrollStrategies.block(),
});

const overlayRef = this.overlay.create(overlayConfig);

我没有对 mat-sidenav 做任何特别的事情，因为它默认是可滚动的。

这是显示问题的 stackblitz。您应该能够滚动侧面导航，然后打开并覆盖，并注意到侧面导航仍然可以滚动

https://stackblitz.com/edit/angular-z68qqg

更新 11.07.2020

Github 上的问题https://github.com/angular/components/issues/19401

原帖

在列表中向下或向上拖动项目时，是否可以调整滚动速度？在 macOS 上的 Firefox 中，它的行为符合预期，我拖动项目越往下滚动越快。在 Chrome 和 Safari 中，似乎只有一种速度。

对我来说，Chrome 中的行为是最重要的，因为我计划在 ionic 项目中使用拖放。

有人知道滚动是 CDK 中的自定义 javascript 实现还是某些本机浏览器功能？

闪电战