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

Question

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

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;}