L'effondrement de ne pas travailler en ng-bootstrap et angulaire 4 application pour la barre de navigation de navigation bouton

Je suis en utilisant angulaire 4 et bootstrap 4 beta 2 et ng-bootstrap pour mon application et également à l'aide de ng-bootstrap.

J'ai ajouté la barre de navigation de la de bootstrap, documentation exemple.

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é bootstrap styles angulaire-cli.json. Ce code ressemble à ceci:

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

De la barre de bouton sur l'affichage mobile ne répond pas sur son clic. et quand j'ai essayé d'inspecter le même: je suis arrivé à savoir que "effondré" la classe n'est pas ajouté au bouton de clic.

semble que vous avez oublié de l'ajouter JQuery/bootstrap.js
je suis à l'aide de ng-bootstrap où jquery n'est pas nécessaire

InformationsquelleAutor Adithya Sai | 2017-11-10

J'ai une solution maintenant. Juste à l'aide de ng-bootstrap permet de résoudre 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>

Composant fichier ts:

export class AppComponent {
  isCollapsed = false;
}

ajouter le fichier css de bootstrap dans angulaires-cli.json:

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

Ajouter ceci dans le module principal:

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

imports: [
  NgbModule.forRoot()
]

Cela fonctionne comme un charme.

Le principal avantage de l'utilisation de ng-bootstrap est, vous pouvez éliminer les dépendances d'autres bibliothèques js comme jquery et popper et vous pouvez également écrire vos composants pour bootstrap.

Module non trouvé: Erreur: ne Peut pas résoudre '@ng-bootstrap/ng-bootstrap "dans" /home/www/angulaire/ngdemo/src/app'
Momaya avez-vous installé ng-bootstrap en premier? npm install --save @ng-bootstrap/ng-bootstrap Voir ici lien
A travaillé pour moi. Merci
Pourquoi nous avons besoin de solution pour cela? Pourquoi bootstrap par défaut de l'effondrement de la fonctionnalité ne fonctionne pas?

InformationsquelleAutor Adithya Sai

5

À l'aide de ng-bootstrap (ou dans mon cas, la ngx-bootstrap) certainement simplifié les choses que je n'ai pas de soucis à propos de jQuery et popper. Comme actuellement accepté de répondre mentionne.

Cela n'a toutefois pas à résoudre mon problème d'emblée que j'ai raté les détails importants. Après avoir ngx-bootstrap et en cours d'exécution, vous pouvez commencer par la liaison de la collapse propriété de la navbar-collapse div à une variable dans votre fichier de composant:
```
<div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
  ...
</div>
```
Qui à elle seule ne suffit pas, et vous avez réellement besoin de modifier cette variable vous-même (c'est la partie que j'ai raté) en se liant à l'événement click de votre activation /désactivation du bouton:
```
<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 fondamentaux de la pièce manquante pour moi. Cette lie de l'événement onClick du bouton de votre isCollapsed variable de basculement lorsque cliqué, et donc un réglage de la collapse propriété de votre barre de navigation de manière appropriée.

Voici le jsfiddle j'ai trouvé la fin m'a aidé à comprendre mon erreur:
jsFiddle lien externe
- merci! cette résolu pour ngx-bootstrap
InformationsquelleAutor Rohan

De Travail Barre De Navigation

ng-bootstrap

Prise En Main

Composants

 <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>

InformationsquelleAutor Arqam Bin Rehan

Vous devez vous connecter pour publier un commentaire.