Angular 6 modal，作为单独组件使用时增加了modal的宽度答案

【问题标题】：Angular 6 modal, increasing the width of the modal when used as a separate componentAngular 6 modal，作为单独组件使用时增加了modal的宽度
【发布时间】：2018-12-29 13:04:11
【问题描述】：

Similar questions have been asked 之前，但我似乎无法将他们的解决方案应用于这个特定的用例。

我正在尝试增加模态窗口的宽度，the most common solutions 将把内容封装在 <div class="modal-dialog"></div> 中但是，当我尝试此解决方案时，模态变得完全没有响应，格式变得奇怪并且按钮停止工作。

我使用this ng-bootstrap guide 制作组件，我想要的最终结果是一个 90% 宽度的模态窗口，我可以根据情况在其中放置其他组件。

这是包含的组件代码：

<p>You can pass an existing component as content of the modal window. In this case remember to add content component
as an <code>entryComponents</code> section of your <code>NgModule</code>.</p>

<button class="btn btn-lg btn-outline-primary" (click)="openModal()">Launch demo modal</button>

这是包含的component.ts：

import { Component, OnInit } from '@angular/core';

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {ModalInvoicePopupComponent} from '../modal-invoice-popup/modal-invoice-popup.component';

@Component({
  selector: 'app-about-us',
  templateUrl: './about-us.component.html',
  styleUrls: ['./about-us.component.css']
})
export class AboutUsComponent implements OnInit {

  constructor(private modalService: NgbModal) {}

  openModal() {
    const modalRef = this.modalService.open(ModalInvoicePopupComponent);
  }

  ngOnInit() {
  }

}

这里是模态组件的 html：

<div class="modal-header">
  <h4 class="modal-title">myModal title</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>myModal body</p>
  <p>Size differences when a large string is inserted, test of scaling</p>
  <p>Importing an existing app into the modal, what happens then?</p>
  <app-invoices></app-invoices>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

如果我尝试将模态组件封装在模态对话框 div 中，它就会中断，并开始看起来像这样：

然后变得完全没有反应。

在 Angular 中用作组件时，有没有增加模态弹出窗口大小的好方法？

【问题讨论】：

标签： javascript css angular modal-dialog bootstrap-modal

【解决方案1】：

改变你的功能如下：

openModal() {
    const modalRef = this.modalService.open(ModalInvoicePopupComponent, {
        width: '78vw'
    });

}

它将给出模态78vw的宽度，您可以根据您的移动设备更改它。

【讨论】：

【解决方案2】：

您已经使用了 NgbModal，在这种情况下，您可以使用 NgbModalOptions 来定义模态的大小。在那里，您可以在打开模式时定义它的大小，比如

this.modalService.open(content,{
    size: 'xl'
});

请参阅https://ng-bootstrap.github.io/#/components/modal/api 了解详细信息。

【讨论】：