在组件Angular 2中重定向


76

我有一个简单的方法,在它的结尾,我想重定向到另一个组件:

export class AddDisplay{
  display: any;

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

  }
}

我想做的是在方法结束时重定向到另一个组件:

export class AddDisplay{
  display: any;

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

    this.redirectTo('foo');
  }
}

如何在Angular 2中实现这一目标?


我只能想到路由。您可以使用导航
Eric Martinez

Answers:


95

首先配置路由

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

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

然后在您的组件中导入,然后注入路由器

import {Router} from 'angular2/router'

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

您要做的最后一件事就是打电话

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

要么

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

仅供参考:navigateByUrl不接受数组。只是一个字符串。
Ben Thielker '16

1
如何重新加载视图?navigatenavigateByUrl似乎更改了网址,但未重新加载绑定到路由的组件。
dopatraman'8

9
注意:此答案针对的是Angular 2的beta版或候选版本,并且不再适用于Angular 2 final。
jbandi

6

@kit的答案是可以的,但请记住要添加ROUTER_PROVIDERS到组件中的提供程序。然后,您可以重定向到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']);
    }

}

23
注意:此答案针对的是Angular 2的beta版或候选版本,并且不再适用于Angular 2 final。
jbandi

2
@jbandi请您提供一个更新的答案,好吗?
雨果

4

这对我来说适用于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}`]);

  }

1
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    
        }
    });
}

嗨,PYRO BUG,欢迎您。请考虑添加说明。
Tiago Martins Peres李大仁
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.