Comment utiliser Bootstrap déroulant dans Angular2 application?

Dans mon projet actuel, je veux ajouter les listes déroulantes, pour qui j'ai pris le code de cette lien. Après avoir ajouté le code ci-dessous, la liste déroulante apparaît, comme dans l'exemple mais quand je clique dessus rien ne se passe.

   <li class="dropdown">
                <a [routerLink]="['/frontendai']" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Application Insights <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a [routerLink]="['/frontendai']">FrontEnd AI</a></li>
                    <li class="divider"></li>
                    <li><a [routerLink]="['/apiai']">API AI</a></li>
                    <li class="divider"></li>
                    <li><a [routerLink]="['/apiai']">SQL Exception</a></li>
                </ul>
            </li>

J'ai utilisé de démarrage de la version 3.3.7, et ajouté les lignes ci-dessous dans mon index.cshtml

<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Comment puis-je utiliser Bootstrap déroulant dans Angulaire 2 projet?

Voir ici pour avoir une idée de comment vous pouvez séparer le code dans une autre composante angulaire.

OriginalL'auteur Pradeep | 2017-05-02

  1. 7

    ngx-bootstrap est disponible Angulaire du Projet.(au-dessus de la version 2).

    Voici le lien : http://valor-software.com/ngx-bootstrap/#/dropdowns

    Vous pouvez l'utiliser sur votre projet.

    Instructions

    ne npm install ngx-bootstrap --save

    Importation Déroulant Module

    //RECOMMENDED (doesn't work with system.js)
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
//or
import { BsDropdownModule } from 'ngx-bootstrap';

@NgModule({
  imports: [BsDropdownModule.forRoot(),...]
})
export class AppModule(){}

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>
    J'ai ajouté le ngx-bootstrap de la dépendance dans le paquet.json, mais encore j'ai fait face à un même problème.
    Avez-vous suivi l'enseignement? ou pouvez-vous partager vos plunker? alors il serait grand.
    En fait bootstrap et ngx-bootstrap est un peu différent. Je vais modifier la réponse.
    Merci, maintenant ça fonctionne.

    OriginalL'auteur blackiii

  2. 2

    D'utiliser bootstrap déroulant dans angulaire vous avez besoin d'ajouter deux classes:
    un montrer classe au parent déroulant élément c'est à dire liste déroulante et d'autres montrer classe de son enfant dropdown-menu.

    Pour cela, vous pouvez créer une liste déroulante partie et de passer de la liste de valeurs dans un tableau avec leurs gestionnaires de clic ou créer un personnalisé directive.

    Personnalisé Déroulant directive approche:

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

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

  constructor(private el: ElementRef) { }

  //Binding click to Add show class 
  @HostListener('click') onclick() {

    var parent = this.el.nativeElement;//parent element
    parent.classList.toggle('show');
    var child = [].filter.call(this.el.nativeElement.children, function(ele) {
      return ele.classList.contains('dropdown-menu');
    }); //Identify the child element on dropdown clicked- dropdwon menu

    if(child.length) {
      child[0].classList.toggle('show');
    }
  }

}

    Maintenant dans le modèle de la joindre au bootstrap déroulante:

    <li class="nav-item dropdown" appDropdown>
   <a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Username
   </a>
   <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" >Profile 2</a>
      <a class="dropdown-item" >Logout 2</a>
   </div>
 </li>

    NOTE - Cette solution est pour Bootstrap 4 Déroulant uniquement, pour Bootstrap 3, vous devez identifier les classes qui doivent y être joints. Il doit être ouvrir de la classe parent.

    Merci c'est beaucoup plus simple que d'apporter un supplément de dépendance (rien contre la ngx-bootstrap mais c'est assez facile à mettre en œuvre vous-même une fois que je savais ce qu'une classe pour ajouter à ce que l'élément). Juste une remarque: vous pouvez aussi utiliser ngClass pour appliquer les classes de l'élément je pense également que l' .fonction de bascule sur classList va ajouter/supprimer, en tant que de besoin.

    OriginalL'auteur Vishal