ProgramingTip

구성 요소 Angular 2 내에서 리디렉션

bestdevel 2020. 11. 5. 08:15
반응형

구성 요소 Angular 2 내에서 리디렉션


마지막에 다른 구성 요소로 리디렉션하려는 간단한 방법이 있습니다.

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에서 어떻게 수령 할 수 있습니까?


먼저 라우팅 구성

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

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

}

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

  }

참고 URL : https://stackoverflow.com/questions/32896407/redirect-within-component-angular-2

반응형