Tengo un componente simple como el siguiente en el que intento obtener una referencia al elemento activo de su plantilla.
export class SidebarComponent { @ViewChildren(RouterLinkActive) linkItems: QueryList<RouterLinkActive>; ngAfterViewInit() { let activeLink = this.linkItems.find(item => item.isActive); console.log('Active link is'); console.log(activeLink); //this is undefined } }Y aquí hay una plantilla simple para el componente anterior.
<ul> <li> <a [routerLink]="['/app/link1']" routerLinkActive="active"> Link 1</a> </li> <li> <a [routerLink]="['/app/link2']" routerLinkActive="active"> Link 2</a> </li> </ul> El problema es que no obtengo el elemento activo de la plantilla a pesar de que el estilo se aplica al elemento con clase active . El mismo código funcionó con angular v2 pero se rompió en angular v4. ¿Qué debo hacer para obtener el elemento activo en angular v4?
yo intentaría
constructor(private router:Router) {} ... let isLinkActive = this.linkItems.toArray()[0].isLinkActive(this.router); let activeLink = this.linkItems.find(item => isLinkActive(item)); Supongo que su verificación se realiza demasiado pronto (cuando isActive aún no está configurado)
Consulte también el código en https://github.com/angular/angular/blob/82417b3ca59aa2e5f41ee12db4cb18970b5b4f47/packages/router/src/directives/router_link_active.ts (líneas 98, 108, 132)