Búsqueda de sitios web

javascript - Agregar parámetro a la ruta de Angular 2 desde un componente sin navegar

Con mi código actual estoy intentando hacer enlaces profundos dentro de mi componente Accordion.

Al navegar a dev.local/#/accordion y luego hacer clic en un título de acordeón, quiero actualizar la ruta para que se vea así:

dev.local/#/accordion/2

Pero no quiero navegar a esta ruta una vez que esté configurada. Esencialmente, si alguien hipotéticamente copiara esta URL, los llevaría exactamente al acordeón que estaba abierto cuando la copiaron.

El problema con el que me estoy encontrando es que estoy aplicando el siguiente código a mis enlaces de acordeón para establecer el parámetro:

<a [routerLink]="['Accordion',{tab:'4'}]"></a>

Esto funciona pero en realidad navega y reinicia el componente. Necesito poder hacer clic en este enlace, establecer la ruta a dev.local/#/accordion/4 sin reiniciar el componente al navegar a él.

Aquí están mis rutas actuales:

@RouteConfig([
    {
        path: '/accordion',
        component: Accordion,
        as: 'AccordionNew'
    },
    {
        path: '/accordion/:tab',
        component: Accordion,
        as: 'Accordion'
    }
]);

Respuesta #1

Si las Rutas Aux no ayudan, puedes probar mi solución que usé para un problema similar:

  1. Construye un RootAccordionComponent. Establece un selector para tu AccordionComponent y úsalo como una etiqueta en la plantilla del RootAccordionComponent (por ejemplo, ). También coloca un en algún lugar de esta plantilla. Para RootAccordionComponent usa "path: '/accordion/...'" RouteConfig.

  2. (Si aún no se ha hecho) construya un AccordionService con un atributo tabId.
  3. Construye un TabIdAccordianComponent con una plantilla vacía. Usa "path: '/accordion/:tab'" para él como RouteConfig. Ahora, lo único que hace el componente es obtener el tabId de RouteParams y guardarlo en el AccordionService.
  4. Al inicializar tu AccordianComponent, obtén el tabId del AccordionService.

De esa manera, puedes obtener el tabId cuando tu AccordianComponent se inicializa si alguien va directamente a la URL con un tabId, pero no se recargará si el usuario hace clic en un Accordian.

Ve este Plunker para un ejemplo funcional: http://plnkr.co/edit/5HEgIUZGRP3Cfqh6LvzA?p=preview

Si lanzas la vista previa en una ventana separada, también puedes ver las rutas. Por ejemplo, si cargas "http://run.plnkr.co/WOpQaPkFafJ7uU8Y/#/accordion/2" el Acordeón seleccionado se establecerá en 2.

Espero que esto ayude, aunque no sea la solución más limpia.

RouteConfig para llegar a AccordionRoot:

@RouteConfig([
  {path:'/accordion/...', name: 'AccordionRoot', component: AccordionRootComponent},
])
export class AppComponent { }

El componente raíz del acordeón real:

@Component({
    template: `
      <router-outlet></router-outlet>
      <accordion-component></accordion-component>`,
    directives: [ROUTER_DIRECTIVES, AccordionComponent]
})

@RouteConfig([
    { path: '/:tabId', name: 'AccordionTab', component: TabIdAccordionComponent, useAsDefault: true}
])
export class AccordionRootComponent { }

El Componente TabIdAccordion:

@Component({
    template: ''
})

export class TabIdAccordionComponent {

  constructor(private routeParams: RouteParams, private accordionService: AccordionService){
    let tabId = +this.routeParams.get("tabId");
    this.accordionService.tabId = tabId;
  }
}

El AccordionComponent haciendo uso del tabId del servicio: export class AccordionComponent implements OnInit { constructor(private accordionService: AccordionService){} selectedAccordionId: number;

  ngOnInit(){
    this.setSelectedAccordion(this.accordionService.tabId);
  }

  setSelectedAccordion(tabId: number){this.selectedAccordionId = tabId;}

}

Artículos relacionados