Angular 6模态，当用作单独的组件时会增加模态的宽度

Question

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>

这里是包含的组件。

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>

如果我尝试将modal-component封装在modal-dialog div中，它就会中断，并开始如下所示：

并且变得完全没有反应。

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

Answer 1

按如下所示更改您的功能：

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

}

它将提供模态78vw的宽度，您可以根据您的移动设备进行更改。

Answer 2

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

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

有关详细信息，请参考https://ng-bootstrap.github.io/#/components/modal/api。