web-dev-qa-db-fra.com

Réduire ne fonctionne pas dans l'application ng-bootstrap et angular 4 pour le bouton de navigation dans la barre de navigation

J'utilise angular 4 et bootstrap 4 beta 2 et ng-bootstrap pour mon application, ainsi que ng-bootstrap.

J'ai ajouté la barre de navigation de l'exemple de la documentation d'amorçage.

Le code ressemble à ceci:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

J'ai également ajouté des styles bootstrap dans angular-cli.json. Ce code ressemble à ceci:

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

Le bouton de navigation dans la vue mobile ne répond pas au clic. et quand j’ai essayé d’inspecter la même chose: j’ai appris que la classe "collapsed" n’était pas ajoutée au bouton en cliquant.  enter image description here

bootstrap-4collapseng-bootstraptwitter-bootstrap-4-beta
2
Adithya Sai

J'ai une solution maintenant. Utiliser simplement ng-bootstrap résout votre problème.

Fichier html:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"  aria-expanded="false" aria-label="Toggle navigation" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarTogglerDemo02">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02" [ngbCollapse]="isCollapsed">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Fichier ts composant:

export class AppComponent {
  isCollapsed = false;
}

ajout du fichier css bootstrap dans angular-cli.json:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

Ajoutez ceci dans le module principal:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

imports: [
  NgbModule.forRoot()
]

Cela fonctionnera comme un charme.

Le principal avantage de ng-bootstrap est que vous pouvez éliminer les dépendances d’autres bibliothèques js telles que jquery et popper et vous pouvez également écrire vos composants pour bootstrap.

10
Adithya Sai

Utiliser ng-bootstrap (ou dans mon cas, ngx-boostrap) a définitivement simplifié les choses, car je n'avais pas à me soucier de jQuery et de popper. Comme la réponse actuellement acceptée mentionne.

Cependant, cela n'a pas résolu mon problème, car j'ai manqué des détails importants. Après avoir lancé ngx-bootstrap, vous pouvez commencer par lier la propriété collapse du navbar-collapse div à une variable de votre fichier de composant:

<div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
  ...
</div>

Cela seul ne suffit pas, et vous devez réellement modifier cette variable vous-même (c'est la partie que j'ai manquée) en liant à l'événement click de votre bouton toggler:

<button (click)="isCollapsed = !isCollapsed" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

(click)="isCollapsed = !isCollapsed" étant la pièce fondamentale manquante pour moi. Cela lie l'événement onClick du bouton à votre variable isCollapsed, en le basculant lorsque vous cliquez dessus et en définissant ainsi la propriété collapse de votre barre de navigation de manière appropriée.

Voici le jsfiddle que j’ai trouvé qui m’a finalement aidé à comprendre mon erreur: jsFiddle external link

2
Rohan

Navbar de travail

ng-bootstrap 

Mise en route </ Li> Composants </ Li> {{composant}} </ li> 

 <span class="github-buttons d-none d-lg-inline"> 
   <a class="github-button" 
      href="https://github.com/ng-bootstrap/ng-bootstrap" 
      target="_blank" 
      data-style="mega" 
      data-count-href="/ng-bootstrap/ng-bootstrap/stargazers" 
      data-count-api="/repos/ng-bootstrap/ng-bootstrap#stargazers_count" 
      data-count-aria-label="# stargazers on GitHub" 
      aria-label="Star ng-bootstrap/ng-bootstrap on GitHub">Star</a> 
   <a href="https://Twitter.com/intent/tweet?button_hashtag=ngbootstrap" 
      class="Twitter-hashtag-button" 
      data-size="large" 
      data-text="I&#39;m checking out ng-bootstrap, THE Angular UI framework for Bootstrap CSS" 
      data-url="https://ng-bootstrap.github.io" 
      data-show-count="true">Tweet #ngbootstrap</a> 
 </span>

0
Arqam Bin Rehan