NG-bootstrap 4 с Angular 8: Navbar работает, но не закрывается автоматически при нажатии (внутри или снаружи navbar) - PullRequest
Новая
       43

NG-bootstrap 4 с Angular 8: Navbar работает, но не закрывается автоматически при нажатии (внутри или снаружи navbar)

0 голосов
/ 12 июня 2019

Я использую ng-bootstrap с Angular 8, и у меня проблема с навигационной панелью. Панель навигации ведет себя правильно с точки зрения реагирования и открытия / закрытия при нажатии на значок гамбургера, но проблема в том, что он не «автоматически закрывается» при нажатии одной из ссылок или когда пользователь нажимает «за пределами» панели навигации. Он закроется, только если пользователь снова нажмет на гамбургер. Есть ли способ использовать ng-bootstrap, чтобы автоматически закрывать панель навигации?

В своем исследовании я нашел несколько примеров того, как настроить навигационную панель с Angular 4+ и ng-bootstrap, и я заметил, что даже у «правильных» примеров есть та же проблема. Можно ли даже автоматически закрыть панель навигации по клику? Вот несколько примеров:

Это типичный код, который я нашел для панели навигации с помощью ng-bootstrap: 

<nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>

Вот примеры плункеров и стекаблиц:
http://plnkr.co/edit/PlGTWzSGqawgQC2wfKp8?p=preview

https://stackblitz.com/edit/angular-ww6oap

В обоих примерах вы увидите, что навигационная панель работает, но нажатие на ссылку или вне навигационной панели не закрывает ее. Только нажав на значок гамбургера снова закрывает его.

1 Ответ

0 голосов
/ 19 июня 2019

Я понял это.Мы можем добавить это к ссылкам на маршрутизатор, чтобы установить для переменной isNavbarCollapsed значение true: 

(click)="isNavbarCollapsed = true"

В целом это выглядит так: 

<div class="collapse navbar-collapse" [ngbCollapse]="isNavbarCollapsed" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" [routerLink]="['/dash/', someParam]" (click)="isNavbarCollapsed = true">Dashboard <span
          class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/archive" (click)="isNavbarCollapsed = true">Archive</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/help" (click)="isNavbarCollapsed = true">Help</a>
    </li>
  </ul>
</div>

Надеюсь, что это поможет кому-то еще.Этот метод в настоящее время (2019-06-18) не включен в документацию ng-bootstrap, поэтому сразу неясно, какой метод лучше всего подходит для закрытия панели навигации ng-bootstrap, когда она находится в адаптивном состоянии (меню гамбургера).

...