Configuré el módulo de enrutamiento de la siguiente manera:
const routes: Routes = [ { path: "engineering/:branches", component: BranchesTabsComponent }, { path: "humanities/:branches", component: BranchesTabsComponent }, ];y en el main-continer.component.ts:
titlesOfEngineeringTabs: string[] = ['E1','E2','E3']; titlesOfHumanitiesTabs: string[] = ['H1','H2']; constructor(private router: Router) {} handleEnginTabs():void{ this.router.navigate(['/engineering', this.titlesOfEngineeringTabs]); } handleHumanTabs():void{ this.router.navigate(['/humanities', this.titlesOfHumanitiesTabs]); }y también main-continer.component.html contiene:
<router-outlet></router-outlet>y luego en branch-tabs.component.ts tenemos:
tabsLable: string[] = ['']; ngOnInit(): void { this.route.params.subscribe(param => this.tabsLable = param["branches"]); }<router-outlet> con el componente branch-tabs en el que se muestran las etiquetas de las pestañas deferentes dependiendo del menú seleccionado... pero aparece este error: *core.mjs:6485 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'engineering;0=%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1;1=%D8%B5%D9%86%D8%A7%DB%8C%D8%B9;2=%D9%85%D8%AA%D8%A7%D9%84%D9%88%D8%B1%DA%98%DB%8C' Error: Cannot match any routes. URL Segment: 'engineering;0=%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1;1=%D8%B5%D9%86%D8%A7%DB%8C%D8%B9;2=%D9%85%D8%AA%D8%A7%D9%84%D9%88%D8%B1%DA%98%DB%8C'*¿Cómo se puede pasar una matriz de cadenas como parámetro y corregir el error anterior? saludos
Documentos angulares en navegar ()
Una matriz de fragmentos de URL con los que construir la URL de destino. Si la ruta es estática, puede ser la cadena de URL literal. Para una ruta dinámica, pase una matriz de segmentos de ruta, seguidos de los parámetros para cada segmento . Los fragmentos se aplican a la URL actual o a la proporcionada en la propiedad relativeTo del objeto de opciones, si se proporciona.
Si su intención es que la URL se vea como /engineering/E1/E2/E3 , entonces debe aplicar el operador de propagación ... a las matrices y se vería así:
this.router.navigate(['/engineering', ...this.titlesOfEngineeringTabs]);Si desea colocar la matriz en la URL, debe ser una cadena. Entonces puedes usar JSON.stringify() y JSON.parse()
handleEnginTabs():void{ this.router.navigate(['/engineering', JSON.stringify(this.titlesOfEngineeringTabs)]); } ngOnInit(): void { this.route.params.subscribe(param => this.tabsLable = JSON.parse(param["branches"])); } Pero queryParams es probablemente más apropiado.
handleEnginTabs(): void { this.router.navigate(['/engineering'], { queryParams: { branches: this.titlesOfEngineeringTabs }, }); } ngOnInit(): void { this.tabsLable = this.route.snapshot.queryParams['branches']; }y eliminando el parámetro de la ruta
{ path: "engineering", component: BranchesTabsComponent },Tenga en cuenta que el usuario puede cambiar los valores de su matriz editando la url. Si eso es algo que no quiere que suceda, tendrá que usar otros medios para pasar los datos.
Este hilo repasa otras formas de pasar datos a las rutas:
¿Cómo paso datos a componentes enrutados angulares?
Sin embargo, muchos de ellos no persistirán en la actualización. Entonces, si desea eso, también tendrá que escribir / leer desde localStorage.