0
147
ViewsCómo reemplazar el elemento de la ruta de navegación con el elemento desplegable dinámicamente
Hola, estoy tratando de crear un elemento de ruta de navegación usando angular. ahora mismo esta asi: 
así que creo un menú desplegable para el elemento de la ruta de navegación, lo que me cuesta hacer es:
cuando hago clic en el elemento del menú desplegable, cambiará de posición con el elemento de la ruta de navegación. En mi ejemplo, si hago clic en "Geysers del Tatio (Lujo)", reemplazará "Geysers del Tatio (Standard)" en la vista de ruta de navegación, y "Geysers del Tatio (Standard)" reemplazará a "Geysers del Tatio (Lujo)" en desplegable.
mi código compartido aquí: https://stackblitz.com/edit/angular-ivy-fbgntk?file=src/app/app.component.html
1 answers
Answer question0
Una forma de lograr lo que desea es mantener un estado en su componente que indique qué ruta de navegación "sub" está seleccionada actualmente, de una lista de todas las opciones posibles.
export class AppComponent { public readonly libraryItems = [ 'Geysers del Tatio (Standard)', 'Geysers del Tatio (Superior)', 'Geysers del Tatio (Lujo)', ]; public activeItem = this.libraryItems[0]; }Con estos en su lugar, puede representar en la plantilla de su componente el elemento desplegable activo, así como la lista de selecciones de elementos restantes.
<li class="breadcrumb-item active drop-container"> <a href="#"> <!-- display currently selected dropdown item --> <span>{{ activeItem }}</span> <span class="glyphicon glyphicon-triangle-bottom small" aria-hidden="true"></span> </a> <div class="drop bg-white"> <ul> <!-- loop all dropdown items --> <li *ngFor="let item of libraryItems"> <!-- ...but only render dropdown items that are not active --> <span *ngIf="item !== activeItem">{{ item }}</span> </li> </ul> </div> </li>Finalmente, para agregar el comportamiento de intercambiar textos desplegables, puede vincular esa lógica cuando se hace clic en un elemento desplegable en la selección, así:
<!-- in the component template --> <span *ngIf="item !== activeItem" (click)="activeItem = item">{{ item }}</span>Aquí hay una demostración funcional: https://stackblitz.com/edit/angular-ivy-xcp3wg?file=src/app/app.component.html