Angular 在折叠时显示不同的导航栏项（ngx引导）

使用ngx引导，是否可以根据导航栏是否折叠显示不同的导航栏引导项目

我试着做了一个俯冲的俯冲和俯冲！崩溃了。不幸的是，这两个节目都是在什么时候播出的！崩溃了

闪电战：

---

如果将

[style.display]=“isCollapsed？”inherit'：“none”

添加到

---

关于

的例子你有小提琴/音乐片段吗？我会把它们放在一起。即使在您刚刚发送的stackblitz中，当导航已满时，两个项目都会显示。谢谢你的帮助这里有一个stackblitz谢谢。更接近，但有2个问题：1）第一个链接1/2显示在折叠视图中2）如果单击切换，然后将屏幕扩展到全视图，所有4个链接都显示在导航栏中…因此它对屏幕大小调整的响应不如切换大。所以菜单并没有因为屏幕大小而改变……很高兴能帮上忙：）祝你好运。

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

 isCollapsed = true;

<!-- 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 (max-width: 576px){
   ul.collapse{
      display:none !important;
   }
}

@media (min-width: 576px){
   ul.full{
      display:none !important;
   }
}

<!-- 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'">