mi sitio Angular 2 tiene una barra de navegación en la columna izquierda, y quiero actualizar una lista de elementos en la columna central (a través de una llamada webapi) cuando el usuario selecciona desde la barra de navegación. Quiero que el elemento de navegación seleccionado se resalte reflejando la elección de los usuarios, la URL del navegador se actualice, etc. cuando el usuario seleccione un elemento de la barra de navegación. Todo funciona como se esperaba en la primera selección con el evento OnInit, pero no en las selecciones posteriores, aunque la URL en el navegador se actualice. Necesito una forma de decirle al componente "groupItems" que se vuelva a dibujar con el último groupId. Los intentos de usar otros eventos del ciclo de vida de Angular no han tenido éxito. ¿Cómo debería abordar esto? Los clics posteriores en la barra de navegación reutilizan la instancia existente. Tengo entendido que hay una manera de activar una nueva instancia de "groupItems" en cada clic en la barra de navegación, ya que mi código actual le dice al inyector de dependencia que reutilice la misma instancia en cada clic en la barra de navegación. Intenté usar un controlador de eventos de clic que actualiza una propiedad pública en el componente secundario (medio), pero no obtengo el comportamiento de navegación que quiero (url del navegador, historial) usando ese enfoque, sin mencionar que el grupo seleccionado es No queda seleccionado en la barra de navegación. Sí, podría modificar el estilo para resaltar la selección, pero estoy aumentando en Angular 2 y estoy haciendo esta pregunta para obtener orientación sobre si el enfoque "routerLink" que estoy usando tiene alguna posibilidad de funcionar o si hay una completamente diferente enfoque que debería estar tomando.
<ul class='nav navbar-nav' > <li *ngFor="let group of groups" [routerLinkActive]="['link-active']"> <a [routerLink]="['groupItems', group.groupId]"> <span>{{group.keyword}}</span> </a> </li> </ul>Puede suscribirse a los parámetros de ruta en el componente. De esa manera, cada vez que cambie la identificación del grupo, el código se actualizará. Aquí hay un ejemplo:
import { ActivatedRoute } from '@angular/router'; ... constructor(private route: ActivatedRoute) { this.route.paramMap.subscribe( params => { console.log(params.get('id')); } ); }En lugar de simplemente registrar el nuevo parámetro, puede proporcionar el código para actualizar los datos.
Puede obtener más información sobre el enrutamiento aquí: https://app.pluralsight.com/library/courses/angular-routing/table-of-contents