RouterLink no funciona


117

Mi enrutamiento en las aplicaciones de angular2 funciona bien. Pero voy a hacer un routeLink basado en esto :

Aquí está mi ruta:

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

Y aquí están los enlaces que hice:

<ul class="nav navbar-nav item">
                    <li>
                        <a routerLink='/home' routerLinkActive="active">Home</a>
                    </li>
                    <li>
                        <a routerLink='/about' routerLinkActive="active">About this</a>
                    </li>
</ul>

Supongo que, cuando hago clic en ellos, navega al componente respetado, pero no realizan nada.


¿Puedes intentarlo [routerLink]='[/home']? ¿Qué versión de Angular2 y versión de enrutador estás usando?
Günter Zöchbauer

no funciona. ¿Estás seguro del lugar de tus citas? Creo que estoy usando la última versión de angular2, pero no sé cómo verificarlo. Lo generé con ng new . y debería actualizarse
Jeff

2
Lo siento, debería ser[routerLink]="['/home']"
Günter Zöchbauer

2
Quizás olvidó agregar directives: [ROUTER_DIRECTIVES],a los metadatos de su componente. Sin eso, Angular no sabrá analizar el routerLinks.
Mark Rajcok

Respuestas:


321

El código que está mostrando es absolutamente correcto.

Sospecho que su problema es que no está importando RouterModule (que es donde se declara RouterLink) en el módulo que usa esta plantilla.

Tuve un problema similar y me tomó un tiempo resolverlo, ya que este paso no se menciona en la documentación.

Así que vaya al módulo que declara el componente con esta plantilla y agregue:

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

luego agréguelo a sus importaciones de módulos, por ejemplo

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

Además de tener las declaraciones de importación correctas, también necesitará un lugar para que se muestre ese routerLink, que está en el <router-outlet></router-outlet>elemento, por lo que también debe colocarse en algún lugar de su marcado HTML para que el enrutador sepa dónde mostrar esos datos.


1
Yo pensaba que sí y sí, ¡tú también tienes toda la razón en mi caso!
Dhananjay

1
Agregar el módulo Router a mis importaciones funcionó, ¡gracias!
ENDEESA

1
Funciona para mi. ¡Muchas gracias!
TheBosti

20

no olvide esto para agregar esto a continuación en su plantilla:

<router-outlet></router-outlet>

9

Intente cambiar los enlaces de la siguiente manera:

  <ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this</a>
    </li>
  </ul>

Además, agregue lo siguiente en el encabezado de index.html:

<base href="https://stackoverflow.com/">


5

úsalo así para obtener más información lee este tema

<a [routerLink]="['/about']">About this</a>

7
Según tu enlace, routerLinkdebería funcionar ;-)
Günter Zöchbauer

Esto funciona para "@angular/router": "~3.4.0". ¡Salud!
mikeym

2
Sí, la notación de corchetes funciona (y es una sintaxis válida con un propósito específico), pero no es una solución a esta pregunta.
isherwood

1

Los enlaces están mal, tienes que hacer esto:

<ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this
        </a>
    </li>
</ul>

Puedes leer este tutorial


1
La notación entre corchetes tiene un propósito diferente y no resuelve este problema.
isherwood

¡Esto fue! <a [routerLink]="['/home']" routerLinkActive="active"> Inicio </a> Estaba siguiendo el tutorial en el que puse routerLinkActive en la etiqueta <li>. cuando lo coloqué en la etiqueta <a, ¡ahora funciona! ¡¡¡¡Muchas gracias!!!! ¡esto es excelente!
Rich P

Por cierto, ya tengo todas las demás etiquetas / elementos sugeridos en su lugar. Ahora esta característica funciona (más o menos). Tengo que seguir el resto del tutorial porque me doy cuenta de que cuando selecciono otras filas, aunque se pasa el valor de la fila seleccionada (lo veo en la URL), solo se representa la primera fila. Pero ese será otro tema. Muchas gracias nuevamente por esta gran ayuda.
Rich P

No sé por qué, pero cuando puse Bracket, funcionó para mí y no importé RouterModule en mi módulo de aplicación ..
Cegone

1

Estaba usando routerlink en lugar de routerLink .


¡Cometí este error y esto lo solucionó! Tampoco tengo idea de por qué fue rechazado (tal vez porque esto podría haber sido un comentario en su lugar o porque no responde directamente a esta pregunta específica). Sería bueno si las personas que votan negativamente pudieran dar una razón.
JoniVR

1

Soy consciente de que esta pregunta ya es bastante antigua, y lo más probable es que ya la haya solucionado, pero me gustaría publicar aquí como referencia para cualquiera que encuentre esta publicación mientras resuelve este problema, es que este tipo de cosas ganó. No funciona si sus etiquetas de anclaje están en Index.html. Debe estar en uno de los componentes.


1

Para cualquiera que tenga este error después de dividir los módulos, verifique sus rutas, me sucedió lo siguiente:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', redirectTo: 'home' } // ← This was my mistake
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Muévase { path: '**', redirectTo: 'home' }a su AppRoutingModule:

public-routing.module.ts:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class PublicRoutingModule { }

app-routing.module.ts:

const routes: Routes = [
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

1

También hay otro caso que se adapta a esta situación. Si en su interceptor, hizo que devolviera un valor no booleano, el resultado final es así.

Por ejemplo, había intentado devolver obj && obj[key]cosas. Después de depurar por un tiempo, me doy cuenta de que tengo que convertir esto al tipo booleano manualmente Boolean(obj && obj[key])para dejar pasar el clic.



1

Para ojos no muy agudos como los míos, en hreflugar de routerLink, me tomó algunas búsquedas para descubrir eso #facepalm.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.