Angular url 쿼리 파라미터, 라우팅 파라미터

이전에 소개했던 앵귤러 라우팅 방법에서 컴포넌트간 데이터 전달하기가 있었다. 근데 일단 그거는 진짜 깔끔하게 보이고 말고 싶어서 그러는 경우다. 그렇다면 정석적으로  협업을 하기 위해 하는 라우팅을 알아보자. 그냥 혼자만 하려면 다 알고있어서 컴포넌트간 이동을 해도 되는 거였지.

정말 쉽지만 비응신 같은 행동이 있었지. 물론 이게 1회용이고 다시 돌아가면 안되는 부분에서는 이렇게 하는게 맞아. 하지만 우리는 이제 뒤로 돌아가더라도 모든게 다 유지가 되는 라우팅을 하려고 해

이전에 언급한 라우팅

Angular 컴포넌트간 데이터 / 값 전달하기

 

이번에도 쉽고 깔끔하게 간다. 

 

방법 1 : <a> 태그 사용

<div *ngIf="item.payment_status == 2.4 && item.interviewed == true" mat-div style="background-color: #D8E6E7;" matTooltip="Class Payment">

    <a [routerLink]="['/registration', {id : item.id }]"></a>

</div>

방법 2 : 함수로 router.navigate 사용

classPayment(id){

    this.router.navigate(['/registration', {id: id}]);

}

 

이렇게 하면 url이 이런 식으로 가겠죠. 물론 보여지는 url은 가려야지

데이터 받는 방법

 

id : string;

 

constructor(

public router: Router,

private route: ActivatedRoute

)

{

  this.id = this.route.snapshot.paramMap.get('id');

}

 

진짜 간단하니, 못한다고 포기하지 말자