使用ngx-bootstrap,是否可以显示不同的导航栏引导项,具体取决于导航栏是否折叠？
我尝试通过制作崩溃的div和！崩溃来做到这一点.不幸的是,两者都表明！崩溃了.
StackBlitz：https://stackblitz.com/edit/angular-startup-proj-ddztm4
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand"
href="#">Navbar</a>
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target=".navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-label="Toggle navigation"
[attr.aria-expanded]="!isCollapsed"
(click)="isCollapsed = !isCollapsed">
<span class="navbar-toggler-icon"></span>
</button>
<!-- show only when not collapsed -->
<div class="collapse navbar-collapse navbarSupportedContent"
[ngClass]="{'hide': isCollapsed}">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link"
href="#">Link One - full screen</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link Two - full screen</a>
</li>
</ul>
</div>
<!-- show only when collapsed -->
<div class="collapse navbar-collapse navbarSupportedContent"
[ngClass]="{'show': !isCollapsed}">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link"
href="#">Link Two - collapsed</a>
</li>
<li class="nav-item">
<a class="nav-link text-success"
href="#">Link Three - collapsed</a>
</li>
</ul>
</div>
</nav>
TS：
isCollapsed = true;
解决方法
如果你将[style.display] =“isCollapsed？’inherit’：’none’”添加到< ul class =“navbar-nav mr-auto”中,这是可能的：
<!-- show only when not collapsed -->
<div class="collapse navbar-collapse navbarSupportedContent"
[ngClass]="{'hide': isCollapsed}">
<ul class="navbar-nav mr-auto">
<!-- rest of code .... -->
</div>
<!-- show only when collapsed -->
<div class="collapse navbar-collapse navbarSupportedContent"
[ngClass]="{'show': !isCollapsed}">
<ul class="navbar-nav mr-auto" [style.display]="isCollapsed?'inherit':'none'">
<!-- rest of code .... -->
</div>
更新：
要使其响应,您可以使用@media queries(例如w3school)：
@media (max-width: 576px){
ul.collapse{
display:none !important;
}
}
@media (min-width: 576px){
ul.full{
display:none !important;
}
}
在css中然后添加以下ul类：
<!-- show only when not collapsed --> `<ul class="navbar-nav mr-auto collapse">` <!-- show only when collapsed --> <ul class="navbar-nav mr-auto full" [style.display]="isCollapsed?'inherit':'none'">
Stackblitz Fork上的示例
