将内容作为组件传递时无法使用 NgbModal 获取全屏模式

Question

我正在使用 Bootstrap 小部件，并尝试创建一个全屏模式（页眉位于顶部，页脚位于底部，正文滚动在中间）。我可以使用一些简单的 html 轻松做到这一点，如下所述：

https://www.codeply.com/go/DLPXHfEIiS/bootstrap-4-full-screen-modal

但是，一旦我开始变得更加复杂并且想要调用我自己的组件作为内容，那么它就不再起作用了。该组件嵌套在模态内容的下一层，我相信这就是破坏流程的原因。我正在尝试遵循此处概述的说明：

https://ng-bootstrap.github.io/#/components/modal/examples#component

即使在上面的示例中，您也可以检查它并看到该组件嵌套在 modal-content div 中。

效果（当尝试使用上面第一个链接中的方法进入全屏时）是模态、模态对话框和模态竞争都进入全屏。然而，尽管我尝试对其进行样式设计，但模式组件中的嵌套组件的大小会根据内容进行调整。

我在这里错过了什么明显的事情？提前致谢，周五快乐。

::编辑以覆盖评论中的限制::

CSS

.gr-modal-full .modal-dialog {
  min-width: 100%;
  margin: 0;
}
.gr-modal-full .modal-content {
  min-height: 100vh;
}

.TS 调用组件

  const journalPopup = this.modalService.open(
    JournalPopupComponent,
    {windowClass: 'gr-modal-full', backdrop: false});
  journalPopup.componentInstance.journal = this.journal;

组件

import {Component, Input, OnInit} from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {HttpClient} from '@angular/common/http';

@Component( {
  selector: `
  <div class="modal-header"></div>
  <div class="modal-body"></div>
  <div class="modal-footer"></div>
`,
  templateUrl: './journal.popup.component.html',
  styleUrls: ['./journal.popup.component.scss']
})

export class JournalPopupComponent implements OnInit {
  @Input() journal: any;
  constructor(public modal: NgbActiveModal) {}
  ngOnInit(): void {
  }
}

Answer 1

通过扔掉上面的代码并采用更老式的方式来得到答案。我只是使用 CSS 并使组件成为绝对的。只要我的页眉和页脚的高度不需要改变（我可以控制），这就可以了。

感谢 John Paul Hennessy 和他的 codepen 在这个链接中给了我所需的支持：https://codepen.io/yewnork/pen/Kpaqeq

.gr-modal-full .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.gr-modal-full .modal-dialog {
  position: fixed;
  margin: 0;
  min-width: 100%;
  height: 100%;
  padding: 0;
}

.gr-modal-full .modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
}

.gr-modal-full .modal-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 80px;
  padding: 10px;
  border-radius: 0;
  //background: #6598d9;
}

.gr-modal-full .modal-title {
  font-weight: 300;
  font-size: 2em;
  color: #fff;
  line-height: 30px;
}

.gr-modal-full .modal-body {
  position: absolute;
  top: 81px;
  bottom: 61px;
  width: 100%;
  overflow: auto;
}

.gr-modal-full .modal-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  padding: 10px;
  border-radius: 0;
  //background: #f1f3f5;
}

Answer 2

要在全屏上打开模式，请尝试以下代码。工作顺利。

fullscreen 属性用于全屏显示模态。

您可以将这些值分配给全屏属性。 类型：'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxl' |布尔值

这里如果值为 md 则它将在 tablet 中全屏显示模式。

在你的代码中你可以这样使用。

const journalPopup = this.modalService.open(
JournalPopupComponent,
{fullscreen: true, backdrop: false});

journalPopup.componentInstance.journal = this.journal;

结果