Невозможно включить Navbar в Bootstrap 4 в Angular

Ответ 1

@Джозеф, похоже, что вы не установили зависимости для начальной загрузки (и самой начальной загрузки) для переключения навигационной панели.

Если вы откроете терминал или командную строку и перейдете в каталог, содержащий ваш файл package.json, выполните следующие команды:

npm install --save jquery
npm install --save popper.js
npm install --save [email protected]beta

Эти команды установят необходимые зависимости для вашего проекта. Они довольно четко рассказывают о том, что делают, но если вам нужно обновить информацию о том, что они делают или как они работают, я бы посоветовал посмотреть документацию по npm install расположенную здесь.

После того, как они будут установлены, вы захотите убедиться, что включили их в свой файл .angular-cli.json, чтобы ваше угловое приложение могло их использовать.

Ответ 2

Похоже, вы, возможно, искали этот пример из Bootstrap. Я сделал и имел ту же проблему.

Проблема в том, что это не пример angular, поэтому он не будет работать. Чтобы он работал, вы должны использовать событие (click) и переменную. Поэтому измените свой шаблон на

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Dashboard</a>
  <button class="navbar-toggler d-lg-none" type="button" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarsExampleDefault" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault" [ngbCollapse]="isCollapsed">
    <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="#">Settings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Help</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Если вы хотите, чтобы ваше меню было свернуто по умолчанию, вы должны установить переменную в true в своем классе (в файле .ts для компонента) public isCollapsed = true;

Здесь plunker

Еще одна вещь; Если ваш навигатор находится в общем модуле, вы также должны помнить об импорте NgbCollapseModule.

То есть, ваш shared.module.ts должен быть:

import { NgModule } from '@angular/core';
import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
/*Plus all your other modules*/

@NgModule({
  imports: [NgbCollapseModule],
  declarations: [],
  exports: []
})
export class SharedModule {}

Ответ 3

В этом примере представлены как переключение функций значка гамбургера (другими словами, всей панели навигации, если она работает в адаптивном режиме), так и переключение пунктов раскрывающегося меню.

Он использует ng-bootstrap, но я бы предпочел использовать встроенную поддержку Navbar Bootstrap вместо того, чтобы делать это "хаки" !?

Очевидно, что другие борются с той же проблемой: https://github.com/twbs/bootstrap/issues/24227

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ApplicationName</a>
  <button class="navbar-toggler" type="button" (click)="toggleNavbar = !toggleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" [ngbCollapse]="!toggleNavbar">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li ngbDropdown class="nav-item">
        <a class="nav-link" id="navbarDropdownMenuLink" ngbDropdownToggle aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div ngbDropdownMenu aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Ответ 4

Если вы хотите, чтобы Angular работал с Bootstrap 4 и не использовал @ng-bootstrap, посмотрите код в этом репозитории git: https://github.com/fmorriso/Angular-bootstrap4-nav/tree/master/src/app/навигация

Я потратил слишком много времени на это. Вы должны взломать Angular, чтобы заставить его работать; дело не только в неправильных версиях и т.д.

Ответ 5

Как уже говорилось, вам нужно свойство (например, isShown, которое изначально ложно), затем используйте

[ngClass]="{ 'show': isShown }" 

Вот

<div class="collapse navbar-collapse" [ngClass]="{ 'show': isShown }" id="navbarSupportedContent" >

события щелчка по ссылкам обеспечивают повторное свертывание меню при переходе по ссылке

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {


  isShown:boolean = false;
  constructor() { }

  ngOnInit() {
  }
  
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" routerLink="/"><img width="20%" src="/assets/logo.svg"></a>
  <button #navbarToggler class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" (click)="isShown = !isShown" [attr.aria-expanded]="isShown"  aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" [ngClass]="{ 'show': isShown }" id="navbarSupportedContent" >
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" (click)="isShown = false" routerLink="/">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" (click)="isShown = false" routerLink="/contact">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" (click)="isShown = false" routerLink="/imprint">Imprint</a>
      </li>
    </ul>
  </div>
</nav>