0

I am using ng2-bootstrap navbar with dropdown inside of the navbar. If you look about half way down in the snippet below where the condition for *ngIf="userHasPermission()" you'll see the content for the dropdown menu. I've discovered that I must use anchros with href values to reload the entire page in order to get the browser to navigate to the URL requested. In the selectRecord function, I have the same problem; router.navigate and router.navigateByURL do absolutely nothing at all.

I've checked the following:

  • I'm correctly importing RouterModule and other routerLink's in navbar work perfectly.

  • I'm not attempting to routerLink to the currently active path

Ironically the routerLink on the li that has the dropdown attribute actually works.

The dropdown itself shows up just fine. Selecting any of the options causes the dropdown to disappear, but none of the routerLink options have any effect on anything that is actually contained inside the dropdown.

Here is the navbar markup:

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" (click)="isMenuCollapsed = !isMenuCollapsed"
                data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <button type="button" class="navbar-brand" data-toggle="collapse" (click)="isBrandingCollapsed = !isBrandingCollapsed">
            <i *ngIf="isBrandingCollapsed" class="fa fa-chevron-circle-down"></i>
            <i *ngIf="!isBrandingCollapsed" class="fa fa-chevron-circle-up"></i>
        </button>
    </div>
    <div class="collapse navbar-collapse" (collapsed)="collapsed($event)" (expanded)="expanded($event)" [collapse]="isMenuCollapsed">
      <ul class="nav navbar-nav">
        <li *ngIf="userHasPermission()" style="display:inline-block;" routerLink="path1/{{shortName}}" routerLinkActive="active" (click)="isMenuCollapsed = true" role="button" dropdown>
                <i class="fa fa-home fa-lg"></i> {{shortName}}
            </li><a style="display:inline-block;" dropdownToggle>
                <b class="caret"></b>
            </a>
            <ul dropdownMenu class="list-group" role="menu" aria-labelledby="customer-selection">
                <!-- TODO: Figure out why routerLink will not work here and fix it. A full page reload is necessary -->
                <li routerLink="/admin/new" class="btn btn-default" role="button"><i class="glyphicon glyphicon-plus"></i> {{'add'|translate}}</a>
                <li *ngFor="let r of recordList" class="list-group-item">
                    <li class="list-group-item"        (click)="selectRecord(r.shortName)">{{r.shortName}}</li>
            </ul>
        </li>
        <li *ngIf="!userHasPermission()" routerLink="path1/{{shortName}}" routerLinkActive="active" (click)="isMenuCollapsed = true" role="button">
            <a i18n="Customer menu label"><i class="fa fa-home fa-lg"></i> {{shortName}}</a></li>
        <li routerLink="path2" routerLinkActive="active" (click)="isMenuCollapsed = true" role="button">
            <a i18n="Users menu label"><i class="fa fa-users fa-lg"></i> {{ "path2"|translate }}</a></li>
        <li routerLink="path3" routerLinkActive="active" (click)="isMenuCollapsed = true" role="button">
            <a i18n="Questions menu label"><i class="fa fa-book fa-lg"></i> {{ "path3"|translate }}</a></li>
      </ul>
    </div>
  </div>
</nav>

My work around of reloading the entire browser is working but a terrible thing to have to do to simply change the record being viewed.

Amit kumar
  • 6,029
  • 6
  • 30
  • 40
Vector
  • 330
  • 2
  • 12
  • This is interesting. It shows the correct URL at the bottom. However, even if it is a legitimate URL, clicking on it still does nothing but causes the dropdown to change state so the drop down menu is gone...but no navigation. If I set the URL to path without a route defined, I do get my default page not found error which could only be happening if the router is doing something and then failing or bailing before finishing. – Vector Feb 12 '17 at 10:15
  • Might be related to ``. Hard to tell from here. A plunker to reproduce would probably be quite helpful. – Günter Zöchbauer Feb 12 '17 at 10:23
  • I doubt it's a base href problem and I do have it set to / right now. Every other routing function is working perfectly. Thanks for the comments. I'm under serious pressure at the moment. I've done a work around and when I have more time, I'll see if I can create a plunkr for it. Angular2 and plunkr seems like an oxymoron, but I'll give it a shot. – Vector Feb 20 '17 at 21:45