angular - example - RouterLink no funciona

routerlinkactive angular 6

Question

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

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>

Espero que, cuando hago clic en ellos, se navega al componente respetado, pero ¿no realizan nada?

Answer 1

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

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

Answer 2

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

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

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

Vaya al módulo que declara el componente con esta plantilla y agregue:

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

luego agréguelo a las importaciones de sus 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 elemento <router-outlet></router-outlet> , por lo que también debe colocarse en algún lugar de su HTML marcado para que el enrutador sepa dónde mostrar esos datos.

Answer 3

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="/">

Answer 4

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

Answer 5

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

<router-outlet></router-outlet>