Angolare 2 reindirizzamento al clic

Question

Come creare un semplice reindirizzamento facendo clic su un pulsante in Angular 2? Già provato:

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']); 
    } 

} 

Answer 1

Si potrebbe sfruttare il supporto caso di Angular2:

@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']); 
    } 
} 

Answer 2

direi uso routerLink direttiva & posto che oltre a (ancora) tag

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

Inoltre è necessario rimuovereda providers & inclu de nella dipendenza bootstrap e quindi aggiungere ROUTER_DIRECTIVES in opzione direttive del componente per utilizzare la direttiva su HTML. Assicurarsi che RouterModule con il suo percorso sia stato iniettato nel modulo dell'app principale.

Answer 3

vorrei renderlo più dinamico metodo che utilizza parametri

Importare il router angolare

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

Creare un pulsante con evento Click

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

Creare un metodo con un parametro nome pagina

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

Quando si fa clic il router deve itinerario alla pagina corretta

Answer 4

Prova routerLink sulla modifica del tasto

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

More Info