ngx-bootstrap modal (ng6/bs4) 与 angular2-draggable 一起使用，不会拖动整个模态只是里面的东西

Question

所以，我有一个在 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">&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!!!');
  }
}

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

最后，这是我的 @component({...})

我用它来替换 ngx-bootstrap 代码中的基本模式，如上所示......

请指教...

Answer 1

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