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

Angular pass data on Routing

다른 사이트들 보이 뭐 다 4~5가지의 방법이 있다 이러면서 길게 코드를 쭉 늘어놓는데 멍청한 짓 하지 말고 깰껌하고 빠르게 가자.

 

나는 학원 페이지 개발중이니까 그거로 설명을 한다. 

- 학원 페이지를 만들면 학부모 계정으로 로그인 하고 내가 학생들을 만들어. 그 학생 버튼 누르면 다음 이동 페이지에 그 학생의 상세 정보가 나와야겠지

 

1. www.너의홈페이지도메인.com  이런 주소가 있을때 (뭐 퍼블리시 전이라면 localhost:4200인 상태)

// constructor()에서 public router: Router, 헤서 들여온 router임
classPayment(student){
  this.router.navigateByUrl('/class-product', {state: {student}});
}

이 함수는 누를시 .com/class-product 라는 페이지로 옮지는 함수이다. parameter 안에 들어갈 것을 갈 페이지로 옮긴다는 것이다. 보내는거 너무 쉽다. 그럼 보낸거를 받는 페이지에서 어떻게 받는지 코드 짜보자. 이건 더 쉬워서 화가 난다

 

 

2. 데이터를 받을 컴포넌트에서 보면 history에 저게 저장이 되어있다. 난 그 중에서도 또  {state : {student}} 라고 보냈기에 history.state.student를 해야 보이는 것이다.

// export class 데이터받는컴포넌트이름 implements OnInit { 이 시작줄 바로 다음 줄에 
// student:any; 오는 데이터 받으려고 선언해놓음
ngOnInit(): void {
    this.student = history.state.student;
    console.log("student : ", this.student);
 }

 

개발자에게 삽질이 내공 쌓이는데 좋다고는 하지만, 10줄도 안되어 끝날 걸 지름길이 있는데 굳이 돌아가진 말자. 

Angular 개발하면서 매번 이거 모른다고 모달 띄워서 하는 행동좀 그만하자. 위와 같은 방법으로 쇼핑몰이던 어디던 적용할 수 있다.

 

만일, 이렇게 말고 우리가 fm으로 알고 있는 쇼핑몰이나 그런 url 쿼리 파라미터를 원한다면 그 방법도 작성을 해 놓았다.

앵귤러에서 url 쿼리 파라미터

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

 

 

오늘은 여기까지.