CdkPortal中的CdkDragDrop没有响应

问题描述

我正在尝试使用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",{
  name: "Episode IV - A New Hope",{
  name: "Episode V - The Empire Strikes Back",{
  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不包含使CdkDragDrop功能起作用所需的JavaScript和CSS。外部窗口已与Angular应用断开连接。就像托管Angular应用程序的主页一样，此窗口不仅需要使Cd​​kDragDrop工作的代码，还需要Angular运行时代码。

如果您没有要求它必须是外部窗口的要求，则可以使用模式对话框。如果确实需要外部窗口，则基本上需要在弹出窗口中创建一个微型Angular应用程序。我从不需要使用Angular来做到这一点，但是从我一直在阅读的角度来看，Angular Elements可能是做到这一点的最佳方法。

https://angular.io/guide/elements

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