안녕하세요 ~ 오늘은 Angular 프로젝트에서
Component 안의 Component, View 안에 View 를 생성 해 보도록 하겠습니다 !
아주아주 간단해요 ~~ 저희는 pageSearch View 하위에 detail-view 와 list-view 를 생성 해 보도록 하겠습니다 !
CLI 를 이용하여 다음 명령어를 실행 해 주세요 ~~
매번 느끼는 것이지만 CLI 는 정말 편리한 것 같습니다 ^^
ng generate component pageSearch/detail_view
ng generate component pageSearch/list_view
이렇게 pageSearch 하위에 두개의 컴포넌트들이 생성 되었습니다.
그리고 하위 view 를 넣을 page-search-main.component.html 파일에 다음과같이 View 를 추가 해 봅시다 ~
</div>
<div class="jumbotron">
<label for="search">Now Keyword : {{keyword}}</label>
<div>
<input class="form-control float-left" #inputkeyword="" id="keywordBox" type="text"
style="width: 80%"
placeholder="Keyword" [(ngmodel)]="keyword" (click)="inputKeyword.value=''">
<button (click)="setKeyword(inputKeyword.value)" class="btn btn-default" s tyle="width: 20%">
Change
</button>
</div>
<div>
<app-detail-view></app-detail-view>
</div>
<div>
<app-list-view></app-list-view>
</div>
</div>
마지막으로 page-search.module.ts 를 확인 합니다. 다음과 같이 DetailViewComponent 와 ListViewComponent 가 추가 되었습니다 :-)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageSearchMainComponent } from '../pageSearch/page-search-main/page-search-main.component';
// 양방향 바인딩을 위한 FormsModule import
import { FormsModule } from '@angular/forms';
// COMPOSITION_BUFFER_MODE import
import { COMPOSITION_BUFFER_MODE } from '@angular/forms';
import { DetailViewComponent } from '../pageSearch/detail-view/detail-view.component';
import { ListViewComponent } from '../pageSearch/list-view/list-view.component';
@NgModule({
imports: [
CommonModule,
FormsModule
],
providers: [
{
provide: COMPOSITION_BUFFER_MODE,
useValue: false
}
],
declarations: [PageSearchMainComponent, DetailViewComponent, ListViewComponent]
})
export class PageSearchModule { }
여기까지 작성하시고 확인을 해 보면 짜잔 ~ pageSearch 안에 Detail, List view 가 포함되어있는것을 확인할 수 있습니다.
그리고 저는 Detail과 List View를 다음과 같이 꾸며주었어요 ~~ Bootstrap 짱 ^^
detail-view.component.html
<div class="card mb-3" style="margin: 30px 0px;">
<img class="card-img-top" src="../../../assets/images/img01.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below
as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
list-view.component.html
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Color 01
</a>
<a href="#" class="list-group-item list-group-item-action">Color 02</a>
<a href="#" class="list-group-item list-group-item-action">Color 03</a>
<a href="#" class="list-group-item list-group-item-action">Color 04</a>
</div>
이미지파일은 필요하시면 쓰시라고 첨부합니다 ~ 그냥 색깔만 다른 파일이에요 ~ ㅎㅎ
결과화면을 확인 해 보도록 하겠습니다 !
View 안에 View 넣기 ~~ 어렵지 않아요 ^.^
