web-dev-qa-db-fra.com

Angular 2 redirige au clic

Comment créer une redirection simple en cliquant sur un bouton dans Angular 2? Déjà essayé:

import {Component, OnInit} from 'angular2/core';
import {Router, ROUTER_PROVIDERS} from 'angular2/router'

@Component({
    selector: 'loginForm',
    templateUrl: 'login.html',
    providers: [ROUTER_PROVIDERS]
})

export class LoginComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit() {
        this.router.navigate(['./SomewhereElse']);
    }

}
12
TeodorKolev

Vous pouvez utiliser le support d’événement d’Angle2:

@Component({
  selector: 'loginForm',
  template: `
    <div (click)="redirect()">Redirect</div>
  `,
  providers: [ROUTER_PROVIDERS]
})
export class LoginComponent implements OnInit {
  constructor(private router: Router) { }

  redirect() {
    this.router.navigate(['./SomewhereElse']);
  }
}
24
Thierry Templier

Je le rendrais plus dynamique en utilisant des paramètres de méthode

Importer le routeur angulaire

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

Créer un bouton avec événement click

<div (click)="redirect(my-page)">My page</div>

Créer une méthode avec un paramètre pagename

redirect(pagename: string) {
  this.router.navigate(['/'+pagename]);
}

Lorsque vous cliquez dessus, le routeur doit se diriger vers la bonne page

11
0x1ad2

Je dirais que la directive routerLink est utilisée et placée sur la balise a (ancre)

<a [routerLink]="['./SomewhereElse']">Redirect</a>

Aussi, vous devez supprimer ROUTER_PROVIDERS de providers & l'inclure dans la dépendance de bootstrap, puis ajouter l'option ROUTER_DIRECTIVES in directives du composant pour utiliser la directive routerLink en HTML. Assurez-vous que RouterModule avec son itinéraire a été injecté dans le module principal de l'application.

11
Pankaj Parkar

Essayez la balise de bouton routerLinkon

 <button type="button"  [routerLink]="['/edit']">Edit</button>

Plus d'informations

7
atish shimpi

window.location.reload (); fait le tour

0
java1977