twitter-bootstrap - with - router.navigate angular 6

¿Cómo configurar la clase de barra de navegación Bootstrap "activa" en Angular 2?

Question

¿Cómo puedo configurar la clase de barra de navegación Bootstrap "activa" en Angular 2? Solo encontré Angular 1 way .

Cuando vaya a la página Acerca de , agregue class="active" a Acerca de y elimine class="active" en Inicio .

<ul class="nav navbar-nav">
    <li class="active"><a [routerLink]="[''Home'']">Home</a></li>
    <li><a [routerLink]="[''About'']">About</a></li></li>
</ul>

Gracias

Answer 1

En "@ angular / router": "^ 3.3.1", la diferencia en la versión anterior es el soporte en el routerLinkActive

[routerLinkActive]="[''active'']"

En la versión final, ng2 se quejará, así que solo quite el soporte

routerLinkActive="active"

Answer 2

En RC2 eso no funcionó para mí. Terminé usando

   <li  (click)="setActive(''home'')" class="{{getActive(''home'')}}"> <a [routerLink]="[''/FullScreen'']">Home</a></li>

y en el código detrás lo rastreé

    currentChoice: string = "home";

   setActive(choice: string): void{
       this.currentChoice = choice;
   }

   getActive(choice: string) : string{
       if(this.currentChoice == choice)
            return "active";
       else
            return "not";

   }

Answer 3

En el caso de enlaces múltiples intente esto

<ul class="navbar-nav ml-auto"> 
<li class="nav-item " routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
<a class="nav-link" routerLink="">Home </a></li>
<li class="nav-item" [routerLinkActive]="[''active'']">
<a class="nav-link" routerLink="/aboutus">About</a></li>
<li class="nav-item" [routerLinkActive]="[''active'']">
<a class="nav-link" routerLink="/gallery">Gallery</a>
 </li>
<li class="nav-item" [routerLinkActive]="[''active'']">
<a class="nav-link" routerLink="/contactus">Contact Us</a>
</li>
</ul>

Answer 4

Esto hace el truco (usando RC5)

<li [class.active]="homeLink.classList.contains(''active'')">
    <a #homeLink routerLink="/home" routerLinkActive="active">Home</a>
</li>

Answer 5

La respuesta de Bert Deterd es correcta, pero hay una cosa que se puede agregar.

Si una ruta es una subcadena de otra ruta, verá que sucede algo como esto: 2 anclas activas

Puede agregar esto para que coincida solo con las rutas exactas:

[routerLinkActiveOptions]="{exact:true}"

Ejemplo completo:

<ul class="nav navbar-nav">
  <li [routerLinkActive]="[''active'']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="[''/'']">Home</a>
  </li>
  <li [routerLinkActive]="[''active'']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="[''/about'']">About</a>
  </li>
  <li [routerLinkActive]="[''active'']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="[''/calendar'']">Calendar</a>
  </li>
</ul>

Answer 6

La versión "@ angular / router": "^ 3.3.1"

Simplemente pongo el nombre de la ruta, que declaro en mi app.route.ts

import { ModuleWithProviders } from ''@angular/core'';
import { Routes, RouterModule }   from ''@angular/router'';

import { HomeComponent } from ''./home/home.component'';
import { DeclarationsComponent } from ''./declarations/declarations.component'';

const appRoutes: Routes = [
    { path: '''', pathMatch: ''full'', component: HomeComponent },
    { path: ''declarations'', pathMatch: ''full'', component: DeclarationsComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Y en la vista, solo escribo el nombre de la ruta

  <ul class="nav navbar-nav">
     <li routerLinkActive="active"><a routerLink="">Home</a></li>
     <li><a routerLink="declarations">SAV</a></li>
  </ul>

Answer 7

Para la última versión de Angular2 RC4 funciona el siguiente código simple:

      <li [class.active]="router.url===''/about''"><a [routerLink]="[''/about'']">About</a></li>

Usando import {Router} desde "@ angular / router"; y poner el enrutador en el constructor.

Answer 8

Si usa el nuevo 3.0.0. Enrutador de componentes ( https://github.com/angular/vladivostok ) puede usar la directiva routerLinkActive . No se requiere más javascript.

<ul class="nav navbar-nav">
  <li [routerLinkActive]="[''active'']"> <a [routerLink]="[''one'']">One</a></li>
  <li [routerLinkActive]="[''active'']"> <a [routerLink]="[''second'']">Second</a></li>
</ul>

Usé "@ angular / router": "^ 3.0.0-alpha.7"

Answer 9

Use isRouteActive con generate desde la clase Router .

Según los documentos:

generate (linkParams: any []): Instrucción

Genere una instrucción basada en el Route Link DSL proporcionado.

y

isRouteActive (instrucción: Instrucción): boolean

Dada una instrucción, devuelve verdadero si la instrucción está actualmente activa, de lo contrario es falso.

<li [class.active]="router.isRouteActive(router.generate([''/Home'']))">
   <a [routerLink]="[''/Home'']">Home</a>
</li>

Answer 10

<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
true}">Bob</a>

Answer 11

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

@Directive({
  selector: ''[appNavDropdown]''
})
export class NavDropdownDirective {
  isOpen:boolean =false;
  counter:number = 0;
  constructor(private el: ElementRef, private render: Renderer2) { }

  @HostBinding(''class.open'') get opened() {
    return this.isOpen;
  }

  @HostListener(''click'') onmouseClick()
  {
    this.counter++
    console.log();
    if(this.counter % 2 == 1)//odd
    {
      let part = this.render.parentNode(this.el.nativeElement);
      this.render.addClass(part,''open'');
      this.isOpen = true;
    }else{
      let part = this.render.parentNode(this.el.nativeElement);
      this.render.removeClass(part,''open'');
      this.isOpen = false;
    }
  }
  // @HostListener(''mouseleave'') onmouseLeave()
  // {
  //   let part = this.render.parentNode(this.el.nativeElement);
  //   this.render.removeClass(part,''open'');
  //   this.isOpen = false;
  // }

  toggleClose() {
    // let part = this.render.parentNode(this.el.nativeElement)
    //this.menuclick = false;

  }
  toggle() {
    this.el.nativeElement.classList.toggle(''open'');
  }
}

/**
* Allows the dropdown to be toggled via click.
*/
@Directive({
  selector: ''[appNavDropdownToggle]''
})
export class NavDropdownToggleDirective {
  constructor(private dropdown: NavDropdownDirective) { }

  @HostListener(''click'', [''$event''])
  toggleOpen($event: any) {
    console.log($event)
    $event.preventDefault();
  //  this.dropdown.toggleClose()
   this.dropdown.toggle();
  }
}

export const NAV_DROPDOWN_DIRECTIVES = [NavDropdownDirective, NavDropdownToggleDirective];