Naviguer vers une autre page avec un bouton en angular 2

Question

J'essaie de naviguer vers une autre page en cliquant sur un bouton, mais cela ne fonctionne pas. Quel pourrait être le problème ? Je suis en train d'apprendre Angular 2 et c'est un peu difficile pour moi maintenant.

//Routes/Path in a folder call AdminBoard

export const AdminRoutes: Routes =[

  {
    path: 'dashboard',

    component: AdminComponent,
    children: [
      {path: '', redirectTo: 'Home'},
      {path: 'Home', component: HomeComponent},
      {path: 'Service', component: ServiceComponent},
      {path: 'Service/Sign_in', component:CustomerComponent}

    ]

  }

];

//Button is also in a different folder. Click button to navigate to this page           {path: 'Service/Sign_in', component:CustomerComponent}

  <button class="btn btn-success pull-right" ><a routerLink="/Service/Sign_in"> Add Customer</a></button>

Answer 1

Utilisez-le comme ça, ça devrait marcher :

 <a routerLink="/Service/Sign_in"><button class="btn btn-success pull-right" > Add Customer</button></a>

Vous pouvez également utiliser router.navigateByUrl('..') comme ça :

<button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>    

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

btnClick= function () {
        this.router.navigateByUrl('/user');
};

Mise à jour

Vous devez injecter Router dans le constructeur comme ceci :

constructor(private router: Router) { }

seulement alors vous pouvez utiliser this.router .

Mise à jour 2

Maintenant, après Angular v4, vous pouvez ajouter directement routerLink sur le bouton (comme mentionné par @mark dans la section des commentaires) comme ci-dessous.

 <button routerLink="/url"> Button Label</button>

Answer 2

Vous pouvez utiliser routerLink de la manière suivante,

<input type="button" value="Add Bulk Enquiry" [routerLink]="['../addBulkEnquiry']" class="btn">

ou utiliser <button [routerLink]="['./url']"> Dans votre cas, pour plus d'informations, vous pouvez lire le stacktrace complet sur github. https://github.com/angular/angular/issues/9471

les autres méthodes sont également correctes mais elles créent une dépendance au fichier du composant.

J'espère que votre problème est résolu.

Answer 3

 <button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>

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

btnClick= function () {
        this.router.navigate(['/user']);
};

Answer 4

Il est important que vous décortiquiez le lien du routeur et le lien avec les crochets comme suit :

<a [routerLink]="['/service']"> <button class="btn btn-info"> link to other page </button></a>

Où " /service "Dans ce cas, il s'agit de l'url du chemin spécifié dans le composant de routage.

Answer 5

Le fait d'avoir le lien du routeur sur le bouton semble bien fonctionner pour moi :

<button class="nav-link" routerLink="/" (click)="hideMenu()">
     <i class="fa fa-home"></i> 
     <span>Home</span>
</button>