Есть ли способ построить панель мобильного nav в ng2-bootsrap?

Ответ 1

Вам необходимо включить и использовать директиву свернуть.

сначала вы импортируете директиву  import { CollapseDirective } from 'ng2-bootstrap'

Включите его в свои директивы компонентов
  @Component({ directives: [CollapseDirective] })

Изменить: Как отметил Akkusativobjekt в комментариях, директивы (в текущей стабильной версии angular 2) больше не помещаются в атрибут @Component.
Они включены в атрибут NgModule.

@NgModule({ declarations: [CollapseDirective] })

то в вашем контроллере создайте переменную, чтобы отслеживать, рушилась она или нет.
 export class MyController { public isCollapsed: boolean = true; }

и в вашем шаблоне строка, которая выглядит так:   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" >
вам нужно переключить переменную
  <button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed" >

Кроме того, в вашем шаблоне вы захотите изменить строку, в которой говорится:   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> включить директиву   <div id="navbar" class="navbar-collapse collapse" [collapse]="isCollapsed">

Документация для обвала ng2-bootstrap
Пример использования директивы collapse в html
Документация для NgModule

Ответ 2

Я смог сделать это, используя прямой bootstrap4/jquery в моем проекте angular2, добавив те же атрибуты переключения данных и атрибутов данных в сворачиваемый целевой div:

<nav class="navbar navbar navbar-dark bg-inverse navbar-sticky-top clearfix">
  <div class="clearfix">
    <a class="navbar-brand" href="#">MCR</a>
    <button class="navbar-toggler hidden-sm-up float-xs-right" type="button" data-toggle="collapse"
        data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false"
        aria-label="Toggle navigation">
    </button>
  </div>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2" data-toggle="collapse" data-target="#exCollapsingNavbar2">
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a routerLink="/home" routerLinkActive="active" class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a routerLink="/collection" routerLinkActive="active" class="nav-link" href="#">Collection</a>
    </li>
  </ul>
</div>

Надеюсь, это может помочь кому-то, поскольку я боролся с этим. Спасибо всем, что поставил меня на правильный путь.

Ответ 3

В то время как решение Сета работает абсолютно нормально, я изменил логику срыва. Вместо того, чтобы использовать событие click, я подписываюсь на события маршрутизатора, чтобы свернуть меню только после успешной навигации.

export class NavMenuComponent implements OnDestroy {
    public isCollapsed: boolean = true;
    private subscription: Subscription;

    constructor(private router: Router) {  
        this.subscription = this.router.events.subscribe(s => {
            if (s instanceof NavigationEnd) {
                this.isCollapsed = true;
            }
        });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

Ответ 4

Это ограничение navbar (https://github.com/valor-software/ngx-bootstrap/issues/540). Поэтому вам нужно манипулировать элементом DOM.

<div class="navbar-header page-scroll">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" routerLink="/">
        <img src="assets/images/logo.png">
    </a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-right" >
        <li class="hidden">
            <a></a>
        </li>
        <li><a routerLink="/" (click)="onMenuClick()">Home</a></li>
        <li><a routerLink="/about" (click)="onMenuClick()">About</a></li> 
    </ul>
</div>

И на .ts файл минимальный код shoul:

import { Component, ElementRef, Renderer } from '@angular/core';
export class HeaderComponent {
    constructor(private el: ElementRef, private renderer: Renderer) {
    }
    onMenuClick() {
        //this.el.nativeElement.querySelector('.navbar-ex1-collapse')  get the DOM
        //this.renderer.setElementClass('DOM-Element', 'css-class-you-want-to-add', false) if 3rd value is true 
        //it will add the css class. 'in' class is responsible for showing the menu, remove it.
        this.renderer.setElementClass(this.el.nativeElement.querySelector('.navbar-ex1-collapse'), 'in', false);        
    }
}