繁体   English   中英

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

ngx-bootstrap modal (ng6/bs4) with used with angular2-draggable, doesn't drag the entire modal just what's inside

提示:本站收集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">&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 代码中的基本模式,如上所示......

打开时出现的模态

当我尝试拖动容器但模态内容移动到容器外时的模态

这是模态在 Google 元素选项卡中的外观

请指教...

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;
  }
}
2 如何使用angular2-draggable库停止拖动事件?

我正在使用angular2-draggable库来实现拖放功能,但是问题是,我在主div内放置了一个click事件,在其中放置了ngDraggable ,所以发生的事情是,拖动完成后,click事件也发生了,我不想在拖动时这样做,我想在div上单击,而不是只发生click事件。 请帮助我 ...

3 使用ngx-bootstrap将表单插入模态

目前,我正在使用angular-cli的应用程序中做一些前端工作,而这并不是我以前所有的事情。 我已经完成了大部分工作,但正在尝试建立一个论坛,该论坛当前在表格上方加载为模式。 当前,它来自另一个链接的组件,并像这样在html文件的顶部加载。 我将ngx-bootstrap加载到 ...

6 ngx-bootstrap 模态内的 ngx-bootstrap 模态

我正在开发一个 Angular 应用程序。 我有一个ngx-bootstrap模态,它又是从“父”引导模态启动的。 也就是说,它是嵌套在另一个模态中的模态。 关闭模态的代码行是: this.bsModalRef.hide() 。 问题是,当我单击一个按钮触发执行该行代码的函数时,它可以完美运行, ...

9 使用 ngx-bootstrap 为模态自定义 css

文档( https://valor-software.com/ngx-bootstrap/#/modals#service-custom-css-class )说要使用 并在函数中显示“模板” 但是我为模态创建了一个组件(太大以至于不能在同一个组件中)所以 html 中没有#template ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM