ng-bootstrap -> Typeahead样式

Question

我似乎无法设置ng bootstrap typeahead的下拉菜单的样式。

输入本身的样式很好(组件只包含一个input/typeahead)，但不适用于下拉菜单(尝试使用插入的ngb-typeahead window以及.dropdown-menu类)。

Answer 1

这里有一个很好的答案：https://stackoverflow.com/a/51417049/4248983

tl;dr

• Typeahead窗口是一个动态添加的组件
• 实现Typeahead的组件将样式封装为仅自身
• 在@Component装饰器中设置encapsulation: ViewEncapsulation.None以允许全局访问您的组件样式<@Component>F212>

警告

设置ViewEncapsulation.None将意味着您的组件样式可在全球范围内使用。确保您的css选择器足够具体，以防止影响应用程序中的其他元素！

Answer 2

当涉及到更改其组件时，ng-bootstrap是相当有限的。我会说试着使用template，这是你能达到的最接近定制的方式。像ng-bootstrap和ngx-bootstrap这样的插件是自定义组件，通常不支持对其他插件提供的扩展的可定制性。