web-dev-qa-db-fra.com

Rediriger dans le composant Angular 2

J'ai une méthode simple qui à la fin je veux rediriger vers un autre composant:

export class AddDisplay{
  display: any;

  addPairTo(name: string, pairTo: string){
    this.display = {};
    this.display.name = name;
    this.display.pairTo = pairTo;

  }
}

Ce que je veux faire est à la fin de la méthode rediriger vers un autre composant:

export class AddDisplay{
  display: any;

  addPairTo(name: string, pairTo: string){
    this.display = {};
    this.display.name = name;
    this.display.pairTo = pairTo;

    this.redirectTo('foo');
  }
}

Comment y parvenir en Angular 2?

javascriptangular
67
ThreeAccents

d'abord configurer le routage

import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';

et

@RouteConfig([
  { path: '/addDisplay', component: AddDisplay, as: 'addDisplay' },
  { path: '/<secondComponent>', component: '<secondComponentName>', as: 'secondComponentAs' },
])

puis dans votre composant d'importation, puis injecter le routeur

import {Router} from 'angular2/router'

export class AddDisplay {
  constructor(private router: Router)
}

la dernière chose à faire est d'appeler

this.router.navigateByUrl('<pathDefinedInRouteConfig>');

ou

this.router.navigate(['<aliasInRouteConfig>']);
83
kit

La réponse de @ kit est correcte, mais n'oubliez pas d'ajouter ROUTER_PROVIDERS aux fournisseurs du composant. Ensuite, vous pouvez rediriger vers une autre page de la méthode ngOnInit:

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

}
5
Adrian Wydmanski

Cela a fonctionné pour moi Angular cli 6.x:

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

constructor(private artistService: ArtistService, private router: Router) { }

  selectRow(id: number): void{
       this.router.navigate([`./artist-detail/${id}`]);

  }
3
user10038293