CdkPortal 中的 CdkDragDrop 没有响应答案

【问题标题】：CdkDragDrop in CdkPortal is not respondingCdkPortal 中的 CdkDragDrop 没有响应
【发布时间】：2020-11-12 14:33:19
【问题描述】：

我正在尝试使用 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

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

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

【问题讨论】：

它包含相同的html代码，但不包含JavaScript和css
一切都在 Stackblitz 中...我不明白缺少什么
因为您没有将数组发送/发射到窗口，即。您需要将 (this.movies) 发射到窗口。

标签： angular typescript angular-cdk angular-cdk-drag-drop

【解决方案1】：

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

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

https://angular.io/guide/elements

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

【讨论】：