0

Entonces estoy aprendiendo angular eh definido las rutas correctamente ya que si ingreso desde el navegador a la ruta definida entra correctamente mas sin embargo al tratar de usar enlaces no pasa nada es decir al presionar el enlace debería renderizar la otra vista y obviamente cambiar la url pero no me redirige a la ruta. Entonces esto tengo en el app.config.ts por defecto

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

en el app.component tengo esto

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { HeaderComponent } from './shared/header/header.component';
import { TopBarNavigationComponent } from './shared/top-bar-navigation/top-bar-navigation.component';
import { FooterComponent } from './shared/footer/footer.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,RouterLink,
    HeaderComponent,
    TopBarNavigationComponent,
    FooterComponent,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'store-angular';
}

En ls rutas tengo definido esto

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./views/home/home.component').then(
        (m) => m.HomeComponent
      ),
  },
  {
    path: 'tienda',
    loadComponent: () =>
      import('./views/store/store.component').then(
        (m) => m.StoreComponent
      ),
  },
];

Por ultimo el html donde estarian los links

<ul class="main-menu">
                  <li class="menu-link">
                    <a routerLink="/" routerLinkActive="router-link-active"  routerLinkActive="active" class="link-title">
                      <span class="sp-link-title">Inicio</span>
                    </a>
                  </li>
                  <li class="menu-link">
                    <a routerLink="/tienda" class="link-title">
                      <span class="sp-link-title">Tienda
                      </span>
                      <span class="menu-arrow"><i class="feather-chevron-down"></i></span>
                    </a>
                </ul>

Esas son las partes mas relevantes no hay errores, ni nada en consola simplemente al presionar la ruta <a> no pasa nada es mas cuando paso el cursos en el enlace ni lo detecta como enlace ya que el cursor del raton no cambia al tipico icono de la mano. No se que más hacer o donde esta mi error.

2
  • No veo donde esta el problema, cuales enlaces?
    – René
    Commented el 10 jul. a las 2:58
  • edite la pregunta ya se puede ver el html de los enlaces <a routerLink="/mis-urls"> que son los que no funcionan no hacen nada Commented el 10 jul. a las 3:40

2 respuestas 2

0

Me auto respondo por si alguien llega a tener el mismo problema. Al agregar router en mi componente header se soluciono el problema. Aunque pense que tenerlo en app.component serviria pero no fue asi al menos en mi caso.

Asi quedo el header component despues del cambio que dio solucion al problema

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [CommonModule,RouterLink,RouterLinkWithHref, RouterLinkActive],
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {

}
0

Creo que uno de los errores puede estár en el uso de

RouterLinkActive

La directiva para agregar/eliminar clases de un elemento HTML cuando un routerLink asociado contenido en o dentro del elemento se vuelve activo/inactivo. También puede configurar el aria-current de un enlace activo para una mejor accesibilidad.

https://angular.dev/guide/routing/router-reference

Para ser más concreto me faltaría más información como el componente asociado al HTML que mandas y las reglas CSS que aplican.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.