提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
所以，我有一个在 ng6 和 bs4.x 中完成的应用程序
我从这里安装了 angular2/draggable： Angular Draggable
我在这里使用了模态示例： ngx-bootstrap/modal
如果您向下滚动到：Component#，您将看到我在下面放置的示例。
模板：
<button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button>
组件：
从“@angular/core”导入 { Component, OnInit }; 从 'ngx-bootstrap/modal' 导入 { BsModalService, BsModalRef };
@Component({
selector: 'demo-modal-service-component',
templateUrl: './service-component.html'
})
export class DemoModalServiceFromComponent {
bsModalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
openModalWithComponent() {
const initialState = {
list: [
'Open a modal with component',
'Pass your data',
'Do something else',
'...'
],
title: 'Modal with component'
};
this.bsModalRef = this.modalService.show(ModalContentComponent, {initialState});
this.bsModalRef.content.closeBtnName = 'Close';
}
}
/* This is a component which we pass in modal*/
@Component({
selector: 'modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul *ngIf="list.length">
<li *ngFor="let item of list">{{item}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="bsModalRef.hide()">{{closeBtnName}}</button>
</div>
`
})
export class ModalContentComponent implements OnInit {
title: string;
closeBtnName: string;
list: any[] = [];
constructor(public bsModalRef: BsModalRef) {}
ngOnInit() {
this.list.push('PROFIT!!!');
}
}
DRAGGABLE 功能确实有效，但在我的示例中，会发生以下情况：
最后，这是我的 @component({...})
我用它来替换 ngx-bootstrap 代码中的基本模式，如上所示......
请指教...
我用css解决了这个问题：
.modal-dialog {
.modal-content {
background-color: transparent;
border: none;
box-shadow: none;
}
.ngDraggable {
box-shadow: 0 5px 15px rgba(0,0,0,.5);
border-radius: 6px;
border: 1px solid #999;
overflow: hidden;
}
}
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.