angular router popup

웹페이지를 만든다면 모달과 팝업을 만드는 일은 흔한일인것 같다.

나같은경우는 주로 팝업보다 모달을 생성을 많이 했는데 이게 개인적으로는 어렵게 느껴졌다.

여러가지 방법이야 있겠지만 나는 주로 부트스트랩을 이용해 모달을 띄우는 형식을 사용했었다.

부트스트랩을 이용한 방법은 다음과 같다.

1. bootstrap.js 또는 bootstrap.min.js 를 import

2. 모달을 띄우기 위한 이벤트를 주는 버튼에다가 data-toggle 및 data-target 지정

밑에는 예제 소스이다.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

예제 모달

이걸 Angular에도 적용하는 법은 비슷하다.

1. bootstrap.js 또는 bootstrap.min.js 를 import

2. 하위 컴포넌트 지정

3. 상위 컴포넌트의 이벤트 버튼에다가  data-toggle 및 data-target 지정

이런식으로 사용해도 되지만 나는 좀 더 Angular의 고유의 popup을 띄우고 싶어 여러가지 방법을 찾아가 angular router popup 을 찾았다.

Angular 공홈에서는 Router Outlet을 다음과 같이 소개한다.

The RouterOutlet is a directive from the router library that marks the spot in the template where the router should display the views for that outlet.

구글번역기

RouterOutlet은 라우터에서 해당 콘센트의보기를 표시해야하는 템플릿의 지점을 표시하는 라우터 라이브러리의 지시문입니다

<router-outlet>이라는 Directive를 사용한다.

기존의 Router가 컴포넌트의 전환이라면

Router Oultet은 컴포넌트의 전환이 아닌 

상위 컴포넌트 위에 하위 컴포넌트를 띄운다는 개념이다.

사용 방법

// router 설정방법
// Routing Module
 [
        {
            path: 'notice',
            component: NoticeComponent,
            children: [
                {
                    path: 'add',
                    component: NoticeAddComponent,
                    outlet: 'sub' // outlet 명칭을 sub이라고 지정    나중에 path는 /notice/(sub:add) 이런식으로 나오게 된다.
                }, {
                    path: 'view/:sq',
                    component: NoticeViewComponent,
                    outlet: 'sub'        //  /notice/(sub:view/sq)
                },
]

// HTML
<router-outlet name="sub"></router-outlet>

// navigate 
// 방법 1
<a [routerLink]= "(['/board/notice',{ outlets: { sub: 'add' }}])" class="btn btn_b">+ 공지추가</a>

// 방법 2
this.router.navigate([{ outlets: { sub: [ 'add' , param?] }}]);  

View

상위 컴포넌트(/notice)가 다음과 같이 이루어져 있고 수정버튼을 클릭 시 

Router Outlet을 이용해 하위 컴포넌트를 띄운다.

이 때 상위 컴포넌트에서 하위 컴포넌트의 전환이 아닌 

상위 컴포넌트 위에 하위 컴포넌트를 뛰우는것 이므로 URl이 다음과 같다.

/notice/(sub:edit/param)

Angular Resource에 기재되어 있는

Angular Bootstrap, Angular Material 를 사용해 modal 및 popup을 생성하는 방법도 있다.