Aurelia/Bootstrap: Erstellen eines Dropdown-Menüs in einer Navigationsleiste beim Routing

Question

Ich versuche, ein Bootstrap-Dropdown-Menü in einer nav bar in einer Aurelia Anwendung zu implementieren. Ich benutze eher Standard-Bootstrap-Code, nichts Besonderes zu diesem Zeitpunkt.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
    ... 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
     Artists 
     </a> 
     <ul class="dropdown-menu"> 
     <li><a href="#/artists">All</a></li> 
     <li><a href="#/artists/incomplete">Incomplete</a></li> 
     </ul> 
    </li> 
    ... 
    </ul> 
</div> 

Das Problem ist href="#" im Menü Kopfposition. Ich habe einen Router und eine Route für #. Wenn ich auf den Link klicke, geht es auf diese Route. Keine große Überraschung, aber das ist eindeutig nicht das, was ich machen möchte; Ich möchte mein Dropdown-Menü anzeigen.

Ich weiß nicht, was ich hier tun soll. href="" bewirkt, dass die Anwendung aktualisiert wird. Wenn Sie eine falsche Route einfügen, wird auf der JavaScript-Seite ein Fehler angezeigt und das Menü wird weiterhin nicht angezeigt.

Answer 1

Anzahl:

import 'bootstrap'; 

zu Ihrer Hauptdatei.