После того, как экран браузера свернут, строка меню не работает в Angular.Я использую функции начальной загрузки в Angular

Question

HTML отлично работает в полноэкранном режиме браузера.Когда я изменяю размер браузера до меньшего размера, навигационная панель исчезает, и показывается переключение, вплоть до ожидаемого поведения.Теперь, если я нажимаю на переключатель, то список меню должен отображаться в соответствии с размером экрана.Ниже приведен HTML-код

<nav class="navbar navbar-expand-lg fixed-top">

<button class="navbar-toggler" type="button" 
  data-toggle="collapse" data-target="#navigation-bar" 
  aria-controls="navbarTogglerDemo03" aria-expanded="false" 
  aria-label="Toggle navigation">
        <span class="navbar-toggler-icon">&#9776;</span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navigation-bar">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#social">CONNECT</a></li>
            <li class="nav-item"><a class="nav-link" href="#who">WHO</a></li>
            <li class="nav-item"><a class="nav-link" href="#work">WORK</a></li>
            <li class="nav-item"><a class="nav-link" href="#why">WHY</a></li>
            <li class="nav-item"><a class="nav-link" href="#customers">CUSTOMERS</a></li>
            <li class="nav-item"><a class="nav-link" href="#pricing">PRICING</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact">CONTACT</a></li>
        </ul>
    </div>

</nav>

Answer 1

Поскольку вы используете загрузчик CSS в своем угловом проекте, одним из решений может быть установка ngx-bootstrap из:

 npm i ngx-bootstrap --save

В вашем app.module импортируйте модуль свертывания:

 CollapseModule.forRoot()

Тогда в вашем компоненте (я полагаю, у вас есть navbarComponent.ts или аналогичный?)

  isCollapsed: boolean = false;

И, наконец, в шаблоне navbarComponent

 <button class="navbar-toggler" type="button" (click)="isCollapsed=!isCollapsed">
    <span class="navbar-toggler-icon"></span>
  </button>
 <div class="collapse navbar-collapse"  [collapse]="isCollapsed">
   ... 
 </div>

Надеюсь, это поможет!