web-dev-qa-db-fra.com

la barre de navigation ne s'affiche pas dans le navigateur à l'aide de ng-bootstrap & angular 4

Je construis ma première application Angular 4, en utilisant ng-bootstrap (Bootstrap 4 pour Angular) - sans utiliser Boostrap classique

Le site Web ng-bootstrap ( https://ng-bootstrap.github.io/#/components/accordion/api ) ne répertorie pas de composant pour une barre de navigation (contrairement à Bootstrap 3 ou 4). . Est-ce que cela signifie que je dois créer un menu à partir de menus déroulants/boutons? Ou je dois mélanger Bootstrap 4 normal avec ng-bootstrap?

J'ai essayé de créer ce menu dans le code HTML mais cela ne s'affichera pas dans le navigateur (juste une marque "MyWebSiteName" et une petite boîte grise sur mon écran, pas de navigation)

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">MyWebSiteName</a>
    </div>
     <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

J'ai quelque chose de mal avec ce code HTML? Ou quelqu'un a-t-il un exemple de Navbar qui fonctionne avec ng-bootstrap?

angularng-bootstrap
5
TSG

Comme il n'y a pas de composant de navigation, vous devez utiliser une combinaison de la fonctionnalité ngbCollapse de la fonctionnalité de réduction ainsi que de la fonctionnalité de liste déroulante du composant NgbDropdown . 

Vous devrez lier une instance de ngbCollapse au div.collapse.navbar-collapse et une propriété booléenne de votre classe de composants. ng-bootstrap n'a aucune utilité pour data-*, vous pouvez donc supprimer des attributs tels que data-toggle="collapse".

Vous contrôlez l'état d'ouverture/fermeture du menu de réduction via une propriété de votre classe de composant qui est basculée truefalse par le biais d'un événement comme un clic. Dans cet exemple, basculez via un gestionnaire d'événements (click) sur le button.navbag-toggler en exécutant une méthode sur le composant toggleMenu(), qui inverse simplement la valeur de la propriété booléenne isCollapsed via l'opérateur !.

Pour le menu déroulant d'élément de menu, vous utiliseriez le composant NgbDropdown . Vous appliqueriez les attributs ngbDropdown et ngbDropdownToggle à l'élément conteneur et à l'élément toggle, respectivement.

<div class="nav-item dropdown" ngbDropdown>
  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" ngbDropdownToggle>
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownBasic1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

En termes de style pour Bootstrap 4 navbar , vous devrez utiliser les classes suivantes:

Les barres de navigation nécessitent une enveloppe _/.navbar avec .navbar-toggleable- * pour Collapsus réactif et classes de jeu de couleurs.

De plus, les éléments tels que button.navbar-toggle sont désormais button.navbar-toggler avec un "r" dans Bootstrap 4. Vous utilisez les classes navbar-inverse et bg-inverse pour la barre de navigation inverse standard.

HTML:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" aria-controls="appNavigation" [attr.aria-expanded]="!isCollapsed" aria-label="Toggle navigation" (click)="toggleMenu()">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">My App</a>
  <div class="collapse navbar-collapse" id="appNavigation" [ngbCollapse]="isCollapsed">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link" routerLink="" routerLinkActive="active">Home</a>
      <a class="nav-item nav-link" routerLink="/about" routerLinkActive="active">About</a>
      <div class="nav-item dropdown" ngbDropdown>
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" ngbDropdownToggle>
            Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownBasic1">
          <button class="dropdown-item">Action - 1</button>
          <button class="dropdown-item">Another Action</button>
          <button class="dropdown-item">Something else is here</button>
        </div>
      </div>
    </div>
  </div>
</nav>

TS:

export class NavigationComponent {
  isCollapsed = true;

  constructor() {}

  toggleMenu() {
    this.isCollapsed = !this.isCollapsed;
  }
}

Voici un plunker démontrant la fonctionnalité et le style en action.

Espérons que cela aide!

8
Alexander Staroselsky

Au lieu d’utiliser ng-Bootstrap, essayez d’utiliser Angular pour la même chose.

Petit exemple

Modèle

<nav class="navbar navbar-toggleable-md navbar-light bg-faded  navbar-fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" (click)="isActive = !isActive"> // add this for the responsive button
    <span class="navbar-toggler-icon"></span>
  </button>
  <a routerLink="/home"><img src="angular.png" class = "myImage" alt="Image"/></a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown" [ngClass]="{show : isActive}">
    <ul class="navbar-nav">
      <li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown> // add this directive for the dropdown
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Basic Concepts
        </a>
.....

Directive

 import {Directive, HostListener, HostBinding} from '@angular/core';

  @Directive({
    selector: '[appDropdown]'
  })
  export class DropdownDirective {

    private isOpen:boolean = false;

    @HostBinding('class.open') get opened(){
      return this.isOpen;
    }
    constructor() { }

    @HostListener('click')open(){
      this.isOpen = true;
    }

    @HostListener('mouseleave')close(){
      this.isOpen = false;
    }

Exemple de travail de Same, la barre de navigation située en haut est réalisée à l'aide de directives bootstrap et Angular/ Link

1
Rahul Singh