ng-bootstrap-> Typeahead样式

Question

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

输入本身的样式很好（该组件仅包含输入/预输入），但下拉菜单不适用（使用插入的ngb-typeahead窗口以及该菜单的.dropdown-menu类进行尝试。< / p>

Answer 1

ng-bootstrap在更改其组件方面有很大的限制。我想说的是尝试使用template，它是您可以进行的最接近自定义的过程。诸如ng-bootstrap和ngx-bootstrap之类的插件是自定义组件，通常不支持可自定义性来扩展其他插件所提供的扩展。

Answer 2

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

tl; dr

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

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