Angular : 경로로 수동 리디렉션

최근에 angular.js 1 대신 angular 4를 사용하기 시작했습니다.

angular 4의 기본 사항에 대해 배우기 위해 heroes 튜토리얼을 따랐으며 현재 "@ angular / router"패키지에서 angular의 자체 "RouterModule"을 사용하고 있습니다.

내 응용 프로그램에 대한 일부 인증을 구현하기 위해 수동으로 다른 경로로 리디렉션하는 방법을 알고 싶습니다. 인터넷에서 이에 대한 유용한 정보를 찾을 수없는 것 같습니다.

각도 라우팅 : 수동 탐색

먼저 각도 라우터를 가져와야합니다.

import {Router} from "@angular/router"

그런 다음 구성 요소 생성자에 삽입하십시오.

constructor(private router: Router) { }

그리고 마지막 .navigate으로 "리디렉션"이 필요한 곳 에서 메서드를 호출합니다 .

this.router.navigate(['/your-path'])

다음과 같이 경로에 몇 가지 매개 변수를 넣을 수도 있습니다 user/5.

this.router.navigate(['/user', 5])

문서 : Angular 공식 문서

예 : app.home.html의 이벤트에 대한 angularjs 4 버튼의 리디렉션

<input type="button" value="clear" (click)="onSubmit()"/>

그리고 home.componant.ts에서

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

 @Component({
   selector: 'app-root',
   templateUrl: './app.home.html',
 })

 export class HomeComponant {
   title = 'Home';
   constructor(
     private router: Router,
    ) {}

  onSubmit() {
    this.router.navigate(['/doctor'])
 }
 }

다음과 같이 생성자에 Router를 삽입해야합니다.

constructor(private router: Router) { }

그러면 원하는 곳에서이 작업을 수행 할 수 있습니다.

this.router.navigate(['/product-list']);

각도 리디렉션 수동 : Import @angular/router, Inject in constructor()then call this.router.navigate().

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

constructor(private router: Router) {
  ...
}

onSubmit() {
  ...
  this.router.navigate(['/profile']); 
}

이 시도:

constructor(  public router: Router,) {
  this.route.params.subscribe(params => this._onRouteGetParams(params));
}
this.router.navigate(['otherRoute']);

component.ts 파일 ##의 함수를 사용하여 다른 페이지로 리디렉션

   componene.ts-
   ------------------------------------------------------------------------  
   import {Router} from '@angular/router';

   constructor(private router: Router) {}

   OnClickFunction()
   {
        this.router.navigate(['/home']);
   }

  component.html-
  ----------------------------------------------------------------------------------- 

     <div class="col-3">                  
         <button (click)="OnClickFunction()" class="btn btn-secondary btn-custom mr- 
          3">Button Name</button>
    </div>   

질문에 대한 정답이 충분할 수 있지만 IDE에서 경고를 표시하는 경우

탐색에서 반환 된 약속이 무시됩니다.

이 경고를 무시하거나 this.router.navigate(['/your-path']).then().

이것은 작동합니다

import { Router } from "@angular/router"

export class YourClass{

   constructor(private router: Router) { }

   YourFunction() {
      this.router.navigate(['/path']);
   }

}