angular5 - windowClass 属性或 NgbModalOptions 实际上有什么作用吗？

Question

我正在打开一个 NgbModal，传递一个 TemplateRef 来创建对话框主体，并通过我传递给 open() 方法的 NgbModalOptions 对象的 windowClass 属性传入一个自定义类。我在组件中的引用 styleUrl 中定义类，并通过组件中的可注入服务为模式提供服务。模态加载正常，当我检查 DOM 时可以看到类名，但该类似乎与模态无关。我想用它来自定义模态的大小（css被定义为影响设置大小的子div），但我也玩过我可以在Chrome开发工具的Styles选项卡中看到的属性，但看不到它影响任何东西。当我在 Firefox 开发工具中检查时，我可以找到 CSS 作为内联样式表，并且它引用了 Angular 分配的 ngContent 标识符，所以我假设它不会影响整个文档，也不会影响 ng-bootstrap 添加的那些构成模式包装器的部分。有没有人能够成功地完成这项工作？我已经黔驴技穷了。如果我能获得模态标题潜水的 ElementRef，我什至会很高兴，但由于我使用的是模板（在初始化时未完全加载到 DOM 中），所以我无法做到。我的要求之一是我们通过 Angular 进行所有 DOM 操作以保持项目中的平台独立性......所以没有 jQuery。有什么想法吗？并提前感谢！有没有人能够成功地完成这项工作？我已经黔驴技穷了。如果我能获得模态标题潜水的 ElementRef，我什至会很高兴，但由于我使用的是模板（在初始化时未完全加载到 DOM 中），所以我无法做到。我的要求之一是我们通过 Angular 进行所有 DOM 操作以保持项目中的平台独立性......所以没有 jQuery。有什么想法吗？并提前感谢！有没有人能够成功地完成这项工作？我已经黔驴技穷了。如果我能获得模态标题潜水的 ElementRef，我什至会很高兴，但由于我使用的是模板（在初始化时未完全加载到 DOM 中），所以我无法做到。我的要求之一是我们通过 Angular 进行所有 DOM 操作以保持项目中的平台独立性......所以没有 jQuery。有什么想法吗？并提前感谢！有什么想法吗？并提前感谢！有什么想法吗？并提前感谢！

标签： angular5ng-bootstrapangular6ng-modal

Answer 1

我使用 NgbModalOptions 的 windowClass 和 size 属性来自定义模态。示例代码如下：

this.modalService.open(<your_template_ref_var>, {size: 'lg', windowClass: 'modal-adaptive-s1'});

然而

.modal-adaptive-s1 .modal-lg {width: 400px !important;  max-width: 400px;}