Redirect within component Angular 2

I have a simple method that at the end of it I want to redirect to another component:

export class AddDisplay{
display: any;


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


}
}

What I wanna do is at the end of the method redirect to another component:

export class AddDisplay{
display: any;


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


this.redirectTo('foo');
}
}

How do I achieve this in Angular 2?

121584 次浏览
小开
最佳答案

first configure routing

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

and 

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

then in your component import and then inject Router

import {Router} from 'angular2/router'


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

the last thing you have to do is to call

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

or

this.router.navigate(['<aliasInRouteConfig>']);
小开

@kit's answer is okay, but remember to add ROUTER_PROVIDERS to providers in the component. Then you can redirect to another page within ngOnInit method:

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


}
小开

This worked for me 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}`]);


}
小开 
callLog(){
this.http.get('http://localhost:3000/getstudent/'+this.login.email+'/'+this.login.password)
.subscribe(data => {
this.getstud=data as string[];
if(this.getstud.length!==0) {
console.log(data)
this.route.navigate(['home']);// used for routing after importing Router
}
});
}

提交答案