1

我正在尝试使用 CdkDragDrop 重新排序托管在 CdkPortal 窗口中的列表，但它不起作用。

HTML：

<ng-container *cdkPortal>
<ng-content></ng-content>

<hr />

<div cdkDropList class="example-list mt-20" 
 (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let movie of movies, index as i" 
     cdkDrag>
        <div class="drag-index" (click)="writelog(movie.name)">{{movie.name}} 
        </div>
    </div>
</div>

<p>{{movie | json}}</p>

打字稿：

import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  styleUrls: ["./app.component.css"],
  templateUrl: "./app.component.html"
 })
 export class AppComponent {
  showPortal = false;

  movies = [
  {
  name: "Episode I - The Phantom Menace",
  isDisable: false
  },
{
  name: "Episode II - Attack of the Clones",
  isDisable: false
},
{
  name: "Episode III - Revenge of the Sith",
  isDisable: false
},
{
  name: "Episode IV - A New Hope",
  isDisable: false
},
{
  name: "Episode V - The Empire Strikes Back",
  isDisable: false
},
{
  name: "Episode VI - Return of the Jedi",
  isDisable: false
}
];

drop(event: CdkDragDrop<string[]>) {
console.log(event.currentIndex + "|||" + event.previousIndex);
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}
}

这是显示问题的 StackBlitz。

https://stackblitz.com/edit/angular-open-window-g5stn3?file=src%2Fapp%2Fwindow.component.ts

在页面中，您可以看到一个列表...此列表可以通过拖放重新排序。

现在单击“打开我”按钮，然后尝试拖动以重新排序相同的列表（我无法获得其中的样式，但它是相同的代码）它不会重新排序。

4

1 回答 1

2

正如已经指出的，外部窗口的 html 不包含使 CdkDragDrop 功能工作所需的 JavaScript 和 css。外部窗口与您的 Angular 应用程序断开连接。就像托管 Angular 应用程序的主页一样，这个窗口不仅需要使 CdkDragDrop 工作的代码，还需要 Angular 运行时代码。

如果您没有要求它必须是外部窗口，则可以只使用模式对话框。如果您确实需要外部窗口，那么您基本上需要在弹出窗口中创建一个迷你 Angular 应用程序。我从来不需要用 Angular 来做这件事，但从我一直在阅读的内容来看，Angular Elements 可能是最好的方法。

https://angular.io/guide/elements

如果需要在窗口之间进行通信，则window.postMessage可以使用。

于 2020-11-30T22:44:38.957 回答