Javascript 在组件 Angular 2 中重定向

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32896407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 14:20:06  来源:igfitidea点击:

Redirect within component Angular 2

javascriptangular

提问by ThreeAccents

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?

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

回答by kit

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

回答by Adrian Wydmanski

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

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

}

回答by Adrian Wydmanski

This worked for me Angular cli 6.x:

这对我有用 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}`]);

  }

回答by PYRO BUG

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