Use of routelink in the base html


I'm trying to use the routerLink property of the "tag to" in the html that loads when the page starts.

This works well within the template of a component, but in this case it is not necessary to render a component, since the menu is static.

I do not use href because although it works, it reloads the whole page.

<a href="/personal"> <!-- functiona pero recarga la pagina-->
<a routerLink="/personal"> <!-- no funciona -->

Angular routes:

const appRoutes: Routes = [
  { path: "", redirectTo: "/personal", pathMatch: "full" },
  { path: "personal", component:PersonalComponent },
asked by arturoblack 27.10.2016 в 00:37

3 answers


You should look at the official Angular2 page, Routing & Navigation . You should basically check that you have the following:

Add the base route in src/index.html :

<base href="/">

Import the router in src/app/app.module.ts :

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

Define routes in src/app/app.module.t :

const appRoutes: Routes = [
  { path: "", redirectTo: "/personal", pathMatch: "full" },
  { path: "personal", component:PersonalComponent },

Finally, you must use the <router-outlet></router-outlet> tag in the template of the component where you want the component that the router consumes to be embedded.

Now, you can use the links defined in the router as follows:

 <a routerLink="/personal">Personal</a>

I recommend you look at the official documentation that I have left you above, because it is very useful to understand the operation of Angular 2 routes. Also, you have very useful examples.

answered by 06.03.2017 в 15:59

As I see you would need to put the RouterLink tag so that:

<a [routerLink]=['personal']>

Without knowing the structure of your program, just tell you to take into account the location of your components, since the Angular2 router allows you to put:

../ para el nivel anterior, quedando así: 
            <a [routerLink]=['../personal']>
./ o nada para el nivel actual, quedando así: 
             <a [routerLink]=['./personal']>
             <a [routerLink]=['personal']>
answered by 10.11.2016 в 16:12

In the angle 2 router it could be handled like this

<a [routerLink]="['/personal']">
answered by 08.07.2017 в 17:59