Mean스텍 입문 (8) - Details Component 만들기 -

 - Details Component 만들기 -

 

지난 포스팅에서 home컴포넌트를 마무리했다. 이제 HomeComponent에서 연결할 수 있는 하위 컴포넌트가 필요하다. (RouterLink와 연결될 페이지가 필요) Home컴포넌트의 하위 컴포넌트로 Details 컴포넌트를 생성해보자.

 

1 『 Details 컴포넌트 생성 』

ng g c Details 명령어로 Details 컴포넌트를 자동생성하자.  

 

2 『 app.routing.module.ts 에 Details 라우터 추가하기 』 

---

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { DetailsComponent } from './details/details.component';

 const routes: Routes = [

      {path: '',component:HomeComponent},
       {path: 'details/:id',component:DetailsComponent}

];

@NgModule( {

      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
} ) 

export class AppRoutingModule { }

---

HomeComponent때처럼 DetailsComponent를 임포트하고, path 설정해준다. 여기서 주의사항은 details앞에 ' / '를 붙이지 않는다는 점, 명심하자. 

 

3 『post.service.ts 파일 수정 』

라우팅 된 페이지에서 DB 데이터를 가지고 오려면, 서비스 파일을 거쳐서 컴포넌트로 뿌려줘야 한다. 방식은 http모듈을 이용한 home 컴포넌트 방식과 같다.

이때, express 라우터가 모여 있는 api.js 파일에서 해당 페이지에 해당하는 라우터를 만들고, 그 라우터에 DB파일을 보내준다. 그리고 해당 라우팅 데이터를 앵글러의 서비스가 http모듈로 가지고 와서, 해당 컴포넌트에 전달한다.  

 

//설명 (빨간 글씨: 추가)

---

import { Injectable } from '@angular/core' ;

import { Http } from '@angular/http' ;

import 'rxjs/add/operator/map' ;

@Injectable( )

export class PostService{
     result : any;
     constructor ( private _http:Http ){ }
             getPosts( ){
                              return this._http.get('/api/posts')
                              .map(result=>this.result = result.json());
                         }

getUserPost(id){

                 return this._http.get('/api/details/'+id)
                 .map(result=>this.result = result.json()); 

}

}

---

*getUserPost( ) 함수를 추가한다. getUserPost함수의 인자값으로 id를 넣어서, details컴포넌트에서 getUserPost함수에 id를 전달할 수 있도록 만든다.

 

*http.get('/api/details/'+id)로 라우팅 주소를 설정했으니, express의 model->api.js 파일에서 위의 라우팅에 데이터가 전달되도록 라우팅을 추가한다. 그리고 .map( ) 매서드를 통해서 ('/api/details/'+id)라우팅의 데이터값을 json형태로 받아오도록 한다.

 

4 『 라우팅을 생성 』

server -> models 폴더로 가서, api.js 파일에 ('/api/details/:id') 라우팅을 생성한다.

 

-> Mean스텍 입문 세번째 포스팅에서 생성한 api.js 파일에 아래 코드를 추가한다.

-> 아래 코드에서 posts.find({ _id:userID }) 를 posts.findById(userID)로 변경한다.

//코드

 

---

router.get('/details/:id',function(req,res){

        var userID = req.query.id;        

        posts.findById(userID).exec(function(err,userPost){                       

                                if(err){
                                          console.log(err);
                                       }else{

                              res.json(userPost);                            

                              }
                     })
          }); 

---

/details/:id 라우터에 '/:id'를 붙이면, http모듈을 통해서 params값을 전달받고 전달할 수 있다. HomeComponent.html 에서 'RouterLink='/details/{{ post._id }}'로 설정했기 때문에 express에서 /details/:id 라우터로 설정해주면, ':id'값을 query나 params값으로 받을 수가 있다.

var userID = req.qeury.id  와 req.params.id 는 기능이 같다. 아무거나 사용가능.

 

posts.find({ _id:userID }).exec(function(err,userPost){  중략~ res.json(userPost)})  , userPost 배열에 담아서 전달한다는 의미다.

 

5 『 details.component.ts  만들기  』

Angular Cli로 자동적으로 생성된 details컴포넌트 파일에서 impot 3개를 추가한다. 

 

`` PostService, Post, Router,ActivatedRoute ``

 

(Post 배열 스키마 형태를 이용하기 위해서 Post필요, Express에서 만든 details라우터 데이터를 받기 위해서 PostService파일 필요, Router를 이용하기 위해서 Router필요)

 

-> post:Array<Post> 구문으로 post를 <Post> 스키마 형태로 명시한다. 

-> constructor로 PostService, ActivatedRoute를 각각 _postService, router에 상속받는다.

-> 즉시 실행 함수인 ngOnInit함수에서 module.routing.ts에서 지정했던 'path: details/:id'의 파라미터를 받는다. this.router.params.subscribe( (params)=>{  let id=params[ 'id' ]; } ) , 화살표 함수로 params인자를 바로 받아서 id변수에 params의 id항목 데이터 값을 설정한다. 

-> this._postService.getUserPost(id).subscribe(   res=> this.post = res ); 

-> postService에서 명시했던 getUserPost함수에 id값을 전달한 이후에 다시 .subscribe로 받아서 결과값(res)을 this.post 변수에 할당한다.

 

//코드

 

---

import { Component, OnInit } from '@angular/core';

import { PostService } from '../post.service';
import { Post } from '../post';
import { Router,ActivatedRoute } from '@angular/router';

@Component({

  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss']

})

export class DetailsComponent implements OnInit {

  post:Array<Post>;

  constructor(private _postService:PostService, private router:ActivatedRoute) { }

ngOnInit( ) {

    this.router.params.subscribe((params)=>{

     let id = params['id'];

     this._postService.getUserPost(id).subscribe(res=>this.post = res);

    });
  }

}

---

6 『 ng build , node server.js 실행 』   

<메인 페이지>

   

   <Detail 페이지>