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

Je suis en train de naviguer vers une autre page en cliquant sur un bouton, mais il ne fonctionne pas. Quel pourrait être le problème. Je suis en train d'apprendre angulaire 2 et c'est un peu dur 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>

essayez quelque chose comme ceci: <button class="btn btn-success pull-right" ><a [routerLink]="[ '.', 'Service/Sign_in' ]"> Add Customer</a></button>

InformationsquelleAutor Liska Liskor | 2017-01-02

angular

210

L'utiliser comme ceci, devrait fonctionner:
```
 <a routerLink="/Service/Sign_in"><button class="btn btn-success pull-right" > Add Customer</button></a>
```
Vous pouvez également 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 avez à injecter Router dans le constructeur comme ceci:
```
constructor(private router: Router) { }
```
alors seulement vous êtes en mesure d'utiliser this.router.

Mise à jour 2

Maintenant, Après Angulaire v4 vous pouvez ajouter directement des routerLink attribut sur le bouton (Comme mentionné par @marc dans la section des commentaires) comme ci-dessous -
```
 <button routerLink="/url"> Button Label</button>
```
- puis-je envoyer des données avec elle ?
- Vous ne savez pas si les choses ont changé depuis que ceci a été écrit, mais en octobre 2018, il semble que vous pouvez simplement mettre les [routerLink] attribut directement sur la <button> (ce qui évite certains style les problèmes qui peuvent survenir lors de l'emballage de la touche dans un <a>)
- Donc, ce qui est plus propre? Est-il préférable de ne pas exposer la route dans le balisage, mais le garder plutôt que dans le fichier d'enregistrement de fichier, ou est la "nouvelle" façon avec [routerLink] dans le modèle de la voie à suivre?
- c'est à vous, de l'OMI, il n'est pas logique de cacher vos marques dans le modèle que vous allez naviguer vers l'utilisateur peut voir dans la page suivante. Reste les deux sont les mêmes, je suppose
- Au premier niveau html file où le composant va être chargé a avoir <router-outlet></router-outlet> tag. veuillez consulter la angulaire.io/api/routeur/RouterOutlet#description pour plus de détails.
- Comment parler de quelque chose qui ressemblerait à <button mat-button routerLink="['/users/', user.id]">View</button> ? Mais il me donne une erreur. Est-il une syntaxe correcte pour cela ?
- Je suis la recherche de ma demande, que <button [routerLink]="['/mypath', model.SomeVal ]">The button</button> tente d'accéder à: /mypath,99, au lieu de: /mypath/99 du modèle.SomeVal == 99. J'ai essayé toutes sortes de combinaisons dans le routerLink valeur de l'attribut et rien ne fonctionne comme prévu lorsque vous avez besoin pour naviguer jusqu'à un paramétrée route.
- Il doit y avoir un autre problème avec votre code, comme vous l'avez posté code semble aller pour le mieux, vous Pouvez créer un stackblize exemple pour moi pour déboguer facilement?
InformationsquelleAutor Pardeep Jain
34

Vous pouvez utiliser routerLink de la manière suivante,
```
<input type="button" value="Add Bulk Enquiry" [routerLink]="['../addBulkEnquiry']" class="btn">
```
ou de l'utilisation <button [routerLink]="['./url']"> dans votre cas, pour plus d'info vous pouvez lire l'intégralité de la stacktrace sur github https://github.com/angular/angular/issues/9471

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

Espère que votre souci est résolu.
- Pourquoi ne pas simplement: <button type="button" value="Ajouter en Vrac Enquête" routerLink="../addBulkEnquiry" class="btn">? Pourquoi êtes-vous en utilisant les crochets?
- Parce qu'il est à l'aide d'une expression (un tableau comme valeur), foo="boo" est comme [foo]="'boo'". Peut-être que vous voulez lire stackoverflow.com/questions/43633452/...
- Je préfère cette réponse
InformationsquelleAutor Ronit Oommen
10
```
 <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']);
};
```
- J'ai fait quelque chose de similaire à la première (à l'aide d'un routeur.naviguer), alors cherché d'autres idées, et maintenant l'utiliser routerLink comme mentionné dans d'autres réponses. Je me demande ce qui est mieux, ou si c'est important...
InformationsquelleAutor Aniket
1

Il est important que vous décorez le routeur lien et 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 est le chemin de l'url spécifiée dans le composant de routage.

InformationsquelleAutor Mwiza

vous pouvez modifier

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
au niveau du composant dans le constructeur comme ci-dessous

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

InformationsquelleAutor Mad Javad

-1

Avoir le routeur lien sur le bouton de semble bien fonctionner pour moi:

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

InformationsquelleAutor Rob McCabe

Vous devez vous connecter pour publier un commentaire.

Mise à jour

Mise à jour 2