如何解决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应用程序的主页一样,此窗口不仅需要使CdkDragDrop工作的代码,还需要Angular运行时代码。
如果您没有要求它必须是外部窗口的要求,则可以使用模式对话框。如果确实需要外部窗口,则基本上需要在弹出窗口中创建一个微型Angular应用程序。我从不需要使用Angular来做到这一点,但是从我一直在阅读的角度来看,Angular Elements可能是做到这一点的最佳方法。
https://angular.io/guide/elements
如果需要在窗口之间进行通信,则可以使用window.postMessage
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。