Bootstrap 4 ngx引导模式（ng6/bs4），与angular2可拖动，不'；不要拖动整个模态，就像'；里面是什么

所以，我有一个应用程序是在ng6和bs4.x中完成的

我已从此处安装angular2/draggable：

我在这里使用了模态的例子：

如果向下滚动到：Component#，您将看到我在下面列出的示例

模板：

<button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button>

使用组件创建模态

组成部分：

从“@angular/core”导入{Component，OnInit}； 从“ngx引导/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">&times;</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!!!');
  }
}

@组件({
选择器：“演示模式服务组件”，
templateUrl:“./service component.html”
})
导出类DemoModalServiceFromComponent{
bsModalRef:bsModalRef；
构造函数（私有modalService:BsModalService）{}
OpenModelWithComponent（）{
常量初始状态={
名单：[
“打开带有组件的模态”，
“传递您的数据”，
“做点别的”，
'...'
],
标题：“带组件的模态”
};
this.bsModalRef=this.modalService.show（ModalContentComponent，{initialState}）；
this.bsModalRef.content.closeBtnName='Close'；
}
}
/*这是我们在模态中传递的一个组件*/
@组成部分({
选择器：'模式内容'，
模板：`
{{title}}
&时代；

{{item}

{{closeBtnName}
`
})
导出类ModalContentComponent实现OnInit{
标题：字符串；
closeBtnName：字符串；
列表：任意[]=[]；
构造函数（公共bsModalRef:bsModalRef）{}
恩戈尼尼特（）{
这个.list.push（'PROFIT！！！'）；
}
}

可拖动功能确实有效，但在我的示例中，会发生以下情况：

最后，这里是我的@component（{…}）

我用它来代替ngx引导代码中的基本模式，如上图所示

---

请建议…

我使用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;
  }
}

---

我也面临同样的问题，哇！艾哈迈德，谢谢，但这是一年多以前的事了，我已经解决了，但我可以认真地利用你的帮助。。。。使用angular2Draggable-Boundary，我的特定代码是相同的，但它会拖到浏览器边界之外。我得到的有点复杂，但它是一个模态。我可以将模式拖动到浏览器边界之外。它不像示例那样工作。你想让我写一个新的问题，然后注意它吗？我会投票支持你的，好吗？