如何解决角材料“可拖动”对话框不起作用
我有一个可拖动的对话框,它不起作用。 但是我在另一个项目上也有类似的工作代码。
我的主要代码:
<div cdkDrag cdkDragRootElement=".cdk-overlay-pane" >
<h2 mat-dialog-title cdkDragHandle> Justin Wu</h2>
</div>
<label>I am a {{ position}}</label>
<div>
<button class="close" mat-button (click)="closeDialog()">Close</button>
<button class="save" mat-button (click)="closeDialog()">Save</button>
</div>
您可以在此处找到一个演示:http://www.justa999.com/angular/#/profile
点击“关于我”按钮后,您会看到它
您可以从profile.component.ts调试源代码
我的版本:
{
"@angular-devkit/build-angular": "~0.901.0","@angular/cli": "~9.1.0","@angular/compiler-cli": "~9.1.0","@angular/language-service": "~9.1.0","@types/jasmine": "~3.5.0","@types/jasminewd2": "~2.0.3","@types/node": "^12.12.62","codelyzer": "^5.1.2","jasmine-core": "~3.5.0","jasmine-spec-reporter": "~4.2.1","karma": "~4.4.1","karma-chrome-launcher": "~3.1.0","karma-coverage-istanbul-reporter": "~2.1.0","karma-jasmine": "~3.0.1","karma-jasmine-html-reporter": "^1.4.2","protractor": "~5.4.3","ts-node": "~8.3.0","tslint": "~6.1.0","typescript": "~3.8.3"
}
解决方法
尝试
<h2 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle> Justin Wu</h2>
<div mat-dialog-content >
<label>I am a {{ position}}</label>
</div>
<div mat-dialog-actions>
<button class="close" mat-button (click)="closeDialog()">Close</button>
<button class="save" mat-button (click)="closeDialog()">Save</button>
</div>
,
Angular Modal和CDK Drag经常重叠,您可以使用普通的div并设置其CSS
from sklearn.datasets import make_blobs
data = make_blobs(n_samples = 200,n_features = 2,centers = 4,cluster_std = 1.8,random_state=101)
所以它作为模态出现,cdkdrag起作用。
,我自己解决了此问题:
首先,您必须将内容添加到
<mat-dialog-content>
<label>I am a {{ position}} </label>
</mat-dialog-content>
第二,必须在app.module.ts中声明对话框组件
@NgModule({
declarations: [
ModalContentComponent,
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。