Angular JS 2 - Bootstrap barre de navigation déroulant ne fonctionne pas

Je suis en utilisant angulaire 2 (projet créé à l'aide de la cli) et installé bootstrap.

Ensuite ajouté le bootstrap CSS angulaire-cli.json puis le style fonctionne mais quand j'ai la barre de navigation avec les menus déroulants de son pas de les ouvrir. J'ai pensé est en raison du manque de la bootstrap.js ensuite ajouté que dans la section de scripts angulaires-cli.json, il s'est plaint de jquery!! ensuite ajouté qu'.

Il a commencé à travailler, mais je ne suis pas sûr de ce que je fais est juste.

coller le angulaires-cli.json de référence.

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": ["./js/jquery.js",     "../node_modules/bootstrap/dist/js/bootstrap.js"],

OriginalL'auteur user1342558 | 2016-11-07

  1. 5

    Je vous suggérons d'utiliser une bibliothèque qui offre une intégration native Angulaire 2 avec Bootstrap. Le https://ng-bootstrap.github.io bibliothèque a d'excellentes API et est facile à utiliser. La bonne nouvelle, c'est qu'il possède aussi un support pour les listes déroulantes comme démontré ici: https://ng-bootstrap.github.io/#/components/dropdown

    Avec le mentionné bibliothèque vous n'avez pas besoin d'installer jQuery ni Bootstrap JS (vous avez besoin d'CSS) et des listes déroulantes sont super facile à utiliser (avis de l' ngbDropdown et ngbDropdownToggle directives):

    <div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <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>

    Et bon, il y a même un exemple vivant pour vous: http://plnkr.co/edit/mSV1qxTwLgL55L1kWmd9?p=preview

    Je vous remercie beaucoup pour votre temps et votre exemple. Mais l'exigence est de construire une barre de navigation, semble n'est pas si facile que natif de bootstrap.S'il vous plaît corrigez-moi si je me trompe.
    Je dirais que c'est même plus facile de faire une barre de navigation, par exemple: plnkr.co/modifier/4GJl2bBLsjHGhEjn48hx?p=preview
    Reportez-vous à incorporer.plnkr.co/Yrtwx02y70qJ91ZvInjB
    Il ressemble à ce qui est angulaire 4 et bootstrap 4, qui est encore en alpha. Pouvez-vous nous orienter vers une angular2 bootstrap 3 solution?

    OriginalL'auteur pkozlowski.opensource

  2. 3

    Je suis passé par le ng2-bootstrap, documentation. Ne pas voir que la barre de navigation a été encore terminée. Va refactoriser quand je la vois.

    Cependant, je l'ai fait venir à travers un très tutoriel simple qui ne nécessite pas l'utilisation de jquery. https://medium.com/@ct7/the-simple-way-to-make-a-mobile-angular-2-bootstrap-navbar-without-jquery-d6b3f67b037b

    Avis que l'auteur met dans une référence à une requête de média

    @media(min-width: 768px){...}

    Si vous avez déjà des fichiers d'amorce de style css lien ce n'est pas nécessaire.

    suis allé à ma navbar composant et ajout de la propriété nécessaire et cliquez sur gestionnaire de

      isIn = false;

 toggleState() { //click handler for navbar toggle
    const bool = this.isIn;
    this.isIn = bool === false ? true : false;
 }

    Ajouté le gestionnaire de clic sur la barre de navigation modèle html

     <button type="button" class="navbar-toggle" aria-expanded="false" aria-controls="navbar" (click)="toggleState()">

    Ajouté ngClass à la div que je voulais effondrement

    <div id="navbar" class="navbar-collapse collapse"
  [ngClass]="{'in':isIn}">

    OriginalL'auteur Winnemucca

  3. 0

    oui peut être que cela fonctionne pour vous, Parfois à l'aide de Jquery Angulaire peut causer problème. bcz bootstrap.js peut changer l'élément dom en interne, de sorte qu'il peut causer des problèmes dans certains cas.

    Mais je vous recommande d'utiliser ng2-bootstrap module, ce qui permettra à votre accès Bootstrap composants qui sont déjà écrits pour angular2. ici, vous pouvez également trouver votre Liste déroulante composant.

    OriginalL'auteur Vinay Pandya