标签: ngx-bootstrap-modal

尝试使用像这样的CSS 中心这个ngx-boostrap模态,但它不起作用:

.modal.fade.in{
  display: flex;
  justify-content: center;
  align-items: center;
}

但是在开发工具中,我可以像这样添加CSS:

.modal.dialog{
  top: 50%
}

所以至少它是垂直居中的,但这是在开发工具中,并且html模板中没有.modal.dialog类

有没有办法正确居中ngx-bootstrap模式？

我想通过提供输入消息并添加是/否对话框并输出用户选择(使用EventEmitter)来创建一个通用模态组件以在任何地方使用它

我在以下Plunker中找到了一个示例,但无法在单独的自定义组件中重现它.

plunker示例来自这个网站:https://github.com/valor-software/ngx-bootstrap/issues/2334

更新:

在@Wira Xie回答之后,当我使用静态模态和这个CSS时:

.modal-sm
{
  top: 50%;
  left: 50%;
  width:30em;
  height:18em;
  background-color: rgba(0,0,0,0.5); 
}

模态显示居中,但只有Esc key可以隐藏它,所以当我点击模态外,它仍然可见.

在这里查看ngx-bootstrap 源代码时:

莫代尔,options.class.ts

有一个可选的class property定义为class?: string;.

使用它的方法是什么？

是否可以添加自定义类,如:

this.modalService.config.class = 'myClass';

在使用servive之前,例如:

this.modalRef = this.modalService.show(template, {
  animated: false
});

这样,我认为我们可以将自定义CSS添加到显示的模态中

最佳实践或示例是什么？

我试图添加自定义类但没有成功

该类属性不是数组,如果适用,是否意味着我们只能添加一个自定义类？

演示:通过添加和覆盖modal类,模式不显示

https://stackblitz.com/edit/ngx-bootstrap-3auk5l?file=app%2Fapp.component.ts

以modal这种方式添加类没有帮助:

this.modalRef = this.modalService.show(template, Object.assign({},
                this.config, { class: 'gray modal-lg modal' }));

https://stackblitz.com/edit/ngx-bootstrap-awmkrc?file=app%2Fapp.component.ts

这是我的模板:

<ng-template #template>
    <input #newimg  type="file" class="col-md-10" (change)="fileChange($event)"/>
</ng-template>

我不能得到引用#newimg时,其内部的ng-template(如果我改变它工作正常ng-template到div!)

@ViewChild('newimg') img: ElementRef; //doesnt work

我需要在上传图像后将其值设置为空,但始终未定义.

这是一个在stackblitz中的空白角度7项目,在Angular 6中使用,constructor(private bsModalRef: BsModalRef)所以我可以将值传递给我的子弹出组件.

但当我更新到角7时,它说Module not found: Error: Can't resolve 'ngx-bootstrap/modal/bs-modal-ref.service'.

在stackblitz中,它要求我安装ngx-bootstrap,但我已经安装了.

任何的想法？

我正在尝试使用 ngx-bootstrap-modal 将数据从模态服务传递到模态组件中。该例子表明这一点：

this.modalService.show(ModalContentComponent, {initialState});

但它没有显示ModalContentComponent实际如何消耗该状态。我在调试器中玩过，我从来没有看到我的组件获得这些数据。

如何从组件访问它？

我可能无法将ngx-bootstrap安装到我的angular 4项目中,因此无法使用预定义的模板.我已经通过以下两个链接进行ngx-bootstrap安装,请指导我正确的方法.

https://valor-software.com/ngx-bootstrap/#/getting-started

https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

我有ngx-bootstrap模态组件。此模式在shared文件夹内使用。FirstModalComponent我DashboardModule喜欢用这个：

// Dashboard.module.ts
import { FirstModalComponent } from '../../shared/modals/first-modal/first-modal.component';

@NgModule({
  declarations: [
    DashboardComponent
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes),
    SharedModule
  ],
  entryComponents: [
    FirstModalComponent 
  ]
});

如果我想制作我的FirstModalComponentas 模块，我应该如何在 my 中实现它并在中DashboardModule定义它entryComponents？

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { FirstModalModule } from './first-modal/first-modal.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FirstModalModule
  ],
  exports: [
    CommonModule,
    FirstModalModule
  ]
})
export class ModalsModule { …

我正在使用组件作为模板打开一个模态，一切正常，模态打开并且我正在订阅 onHide 事件，订阅也有效。

但我在这里有一个挑战，我想发送一个具体的原因，例如：“消息添加成功”作为原因。我怎样才能做到这一点？如何发送特定字符串作为原因？

目前，我正在尝试在 MessageAddComponent 组件中设置一个值并使用 bsModalRef.Content 在父组件中访问它，但这不是一个好主意。

newMessage() {
    this.bsModalRef = this.modalService.show(MessageAddComponent, {
        class: 'modal-lg'
    });
    this.subscriptions.push(this.modalService.onHide.subscribe((reason: string) => {
        // i dont like this approach
        if (this.bsModalRef.content.anySuccessfulAction) {
            console.log('foo and bar')
        }
        this.unsubscribe();
    }));
}

我已经ngx-bootstrap使用该命令进行了安装，npm install ngx-bootstrap --save但是当我尝试构建解决方案时，它仍然说

ERROR in src/app/app.module.ts(37,45): error TS2307: Cannot find module 'ngx-bootstrap/modal'.

我已经检查了 node_modules 文件夹ngx-bootstrap/modal是否存在。

这是我的包裹

 {
  "name": "test-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.1.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "@ng-select/ng-select": "^1.6.3",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "angular2-jwt": …

将数据传递给模态可以使用initialState完成,但是如何接收数据呢？例如,如果我想创建一个确认对话框？

我有一个ngx引导程序模式，该模式当前有效，并打开“详细信息清单”页面，其中包含清单中每个人的特定数据。但是，我想使用路由，以便可以通过直接url打开我的列表模式，并根据其ID填充列表中的特定详细信息。例如，... / listings / listing / 50将打开“列表模式”，并填充列表ID 50的详细信息。

目前，我什至无法通过直接网址打开任何模式。

目前，我正在通过单击链接打开每个模式

<a (click)="openDetailsModal(listing)" ...

和我的ListingService

  openDetailsModal(listing: Listing): void {
    this.selectedListing = listing;
    this.bsModalRef = this.modalService.show(ListingDetailComponent, {class:'listingDetailModal'});
    this.bsModalRef.content.listing = this.selectedListing;
  }

另外，我目前还使用HttpClient从数据库中获取所有列表。

有没有一种方法可以禁用ngx-bootstrap模态的动画？

我尝试添加此配置，但无法正常工作：

config = {
  animated: false,
  backdrop: 'static'
};

演示：

https://stackblitz.com/edit/ngx-bootstrap-cwfhnu?file=app%2Fmodal-component%2Fstatic-modal.component.html

该模态仍显示动画。

因为在某些情况下，在更复杂的网页中使用模式时显示速度非常慢（例如单击后2秒钟左右），所以禁用动画可能会更好。