Angulaire 2 rediriger sur cliquez sur

Comment créer simple redirection sur cliquer sur un bouton dans Angulaire 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']);
    }

}

OriginalL'auteur TeodorKolev | 2016-05-16

  1. 24

    Vous pourriez tirer parti de la prise en charge des événements de 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']);
  }
}
    pas de travail. J'ai EXCEPTION: Erreur: Uncaught (promesse): Impossible de trouver la valeur par défaut de sortie d'
    Pourriez-vous nous fournir le contenu du template permet de définir des itinéraires (contenant le SomewhereElse)? Vous devriez avoir un router-outlet ...
    Oui, j'ai à l'intérieur. C'est à l'intérieur de l'app.composante.ts. @Composant({ sélecteur: 'my-app', modèle: ` <nav> <a [routerLink]="['/tableau de bord"]">tableau de bord</a> <a [routerLink]="[/main-menu']">Menu</a> </nav> <routeur-outlet></routeur-outlet> `, directives: [ROUTER_DIRECTIVES] })
    Quelle est la configuration des voies de ce composant?
    importer { Composant, OnInit } '@angulaire de base"; import { Itinéraires, Routeur, ROUTER_DIRECTIVES } '@angulaire/routeur'; import { LoginFormComponent }'. /formulaire d'ouverture de session.composant'; import { MainMenuComponent }'. /menu principal.composant';

    OriginalL'auteur Thierry Templier

  2. 11

    Je dirais utilisation routerLink directive & placé que sur a(ancre) tag

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

    Aussi, vous devez supprimer ROUTER_PROVIDERS de providers & inclure dans le bootstrap de dépendance, puis ajouter ROUTER_DIRECTIVES dans les directives de l'option de composant à utiliser routerLink la directive sur le code HTML. assurez-vous que RouterModule avec son itinéraire a été injecté dans l'Application Principale du module.

    Pouvez-vous montrer code de travail?
    regardez ce plunkr je l'ai pris angulaire.io, qui a beaucoup de lien créé à l'aide de routerLink
    La solution est-elle de travailler pour quelqu'un?
    qu'est-ce que le problème auquel vous êtes confrontés?
    N'cela fonctionne pour naviguer avec les paramètres? C'est juste pour la simple redirection ouais?

    OriginalL'auteur Pankaj Parkar

  3. 11

    Je voudrais le rendre plus dynamique, à l'aide des paramètres de la méthode

    Importer l'angle de routeur

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

    Créer un bouton avec l'événement click

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

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

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

    Lorsque l'utilisateur clique dessus, le routeur devrait itinéraire vers la bonne page

    OriginalL'auteur 0x1ad2

  4. 6

    Essayer routerLinksur le bouton tag

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

    Plus D'Infos

    meilleure réponse !!!
    Pourquoi ne pas simplement: <button type="button" routerLink="/edit">Modifier</button>? Pourquoi êtes-vous en utilisant les crochets?
    c'est sans crochets

    OriginalL'auteur atish shimpi

  5. 0

    fenêtre.emplacement.reload(); fait le truc

    OriginalL'auteur java1977