Angular 6模态，当用作单独的组件时会增加模态的宽度 [英] Angular 6 modal, increasing the width of the modal when used as a separate component

问题描述

曾经问过类似的问题，但我似乎无法将他们的解决方案应用于该特定用例.

Similar questions have been asked before but I can't seem to apply their solution to this specific use case.

我正在尝试增加模态窗口的宽度，最常见的解决方案会将内容包含在<div class="modal-dialog"></div>中.但是，当我尝试这种解决方案时，模式会变得完全无响应，格式会变得很奇怪，并且按钮也会停止工作.

I'm trying to increase the width of my modal window, the most common solutions are to encase the content in a <div class="modal-dialog"></div> However, when I try this solution the modal becomes completely unresponsive, the formatting gets strange and the buttons stop working.

我使用了此ng-bootstrap指南该组件和我想要的最终结果是一个90％宽度的模态窗口，我可以根据情况在其中放置其他组件.

I used this ng-bootstrap guide for making the component and my desired end-result is a 90% width modal window in which I can place other components based on situation.

以下是包含的组件代码:

Here is the containing component code:

<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:

Here is the modal-component 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中，它就会中断，并开始如下所示:

If I try to encase the modal-component inside a modal-dialog div it just breaks, and starts looking like this:

并且变得完全没有反应.

And becomes completely unresponsive.

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

Is there a good way to increase the size of a modal popup when used as a component in Angular?

推荐答案

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

You have used NgbModal, in that case for defining the size of modal you can go for NgbModalOptions. There you can define the size of the modal while opening it, say

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

引用 https://ng-bootstrap.github.io/#/组件/模态/api 以获取详细信息.

这篇关于Angular 6模态，当用作单独的组件时会增加模态的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！