Angular 如何使“角度材质”对话框可拖动
是否可以使“角度材质”对话框可拖动?因为在浪费了大量的搜索时间后,我没有找到一个非常清楚的答案。是的,这包括在Angular Material version 7+更新中,使用cdkDragRootElement 这是一个从中复制的样本 HTML:Angular 如何使“角度材质”对话框可拖动,angular,dialog,angular-material,Angular,Dialog,Angular Material,是否可以使“角度材质”对话框可拖动?因为在浪费了大量的搜索时间后,我没有找到一个非常清楚的答案。是的,这包括在Angular Material version 7+更新中,使用cdkDragRootElement 这是一个从中复制的样本 HTML: <button (click)="openDialog()">Open a draggable dialog</button> <ng-template> <div class="example-dia
<button (click)="openDialog()">Open a draggable dialog</button>
<ng-template>
<div class="example-dialog-content" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
Drag the dialog around!
</div>
</ng-template>
打开一个可拖动的对话框
拖动对话框!
TS:
导出类CdkDragDropRootElementExample实现AfterViewInit、OnDestroy{
@ViewChild(TemplateRef)\u dialogTemplate:TemplateRef虽然此链接可以回答问题,但最好在此处包含答案的基本部分,并提供链接供参考。如果链接页面发生更改,仅链接的答案可能无效。-注意。我将更新答案。谢谢!
export class CdkDragDropRootElementExample implements AfterViewInit, OnDestroy {
@ViewChild(TemplateRef) _dialogTemplate: TemplateRef<any>;
private _overlayRef: OverlayRef;
private _portal: TemplatePortal;
constructor(private _overlay: Overlay, private _viewContainerRef: ViewContainerRef) {}
ngAfterViewInit() {
this._portal = new TemplatePortal(this._dialogTemplate, this._viewContainerRef);
this._overlayRef = this._overlay.create({
positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
hasBackdrop: true
});
this._overlayRef.backdropClick().subscribe(() => this._overlayRef.detach());
}
ngOnDestroy() {
this._overlayRef.dispose();
}
openDialog() {
this._overlayRef.attach(this._portal);
}
}