web-dev-qa-db-fra.com

Accédez à une autre page avec un bouton dans angular 2

J'essaie de naviguer vers une autre page en cliquant sur un bouton, mais cela ne fonctionne pas. Quel pourrait être le problème. J'apprends maintenant 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>
angular
80
Liska Liskor

Utilisez-le comme ceci, devrait fonctionner:

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

Vous pouvez aussi utiliser router.navigateByUrl('..') comme ceci:

<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) { }

alors seulement, vous pourrez utiliser this.router.

Mise à jour 2

Maintenant, après Angular v4, vous pouvez directement ajouter l'attribut routerLink sur le bouton (comme indiqué par @mark dans la section commentaire) comme ci-dessous -

 <button routerLink="/url"> Button Label</button>
185
Pardeep Jain

Vous pouvez utiliser routerLink de la manière suivante,

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

ou utilisez <button [routerLink]="['./url']"> dans votre cas, pour plus d’informations, vous pouvez lire l’ensemble de la pile sur github https://github.com/angular/angular/issues/9471

les autres méthodes sont également correctes mais créent une dépendance sur le fichier de composant.

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

34
Ronit Oommen
 <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']);
};
10
Aniket

Il est important de décorer le lien du routeur et de le relier entre crochets de la manière suivante:

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

Où "/ service" dans ce cas est l'URL du chemin spécifié dans le composant de routage.

1
Mwiza

vous pouvez changer

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;

au niveau des composants dans le constructeur comme ci-dessous

    constructor(private router: Router) {
            this.router.routeReuseStrategy.shouldReuseRoute = () => false; 
}
0
Mad Javad