[Angular] 저장되지 않은 파일이 있는데 뒤로 가기를 누른 경우 경고 알럿 띄우기

안녕하세요. 명동섞어찌개 입니다.

오늘은 Angular 페이지에서 문서 (form) 작성 중 또는 무언가를 등록하다가, 저장하지 않고 브라우저 뒤로가기 버튼을 눌렀을 때 '저장하지 않은 파일이 있습니다. 페이지를 나가시겠습니까?'라고 묻는 알럿 띄우는 기능을 만들려고 합니다.



일반적으로 이런 기능은 javascript 에서는 popstate 이벤트 리스너를 사용해서 구현합니다. (모바일에서도 사용한 기억이 있습니다.)

1
2
3
window.addEventListener('popstate', (event) => {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});

하지만 Angular 에서 window:popstate 로 아무리 구현해 봐도 원하는 기능이 작동하지를 않더군요.

아마도 popstate 는 페이지가 이동할 때 호출되는 이벤트인데, Angular 는 SPA(Single Page Application) 다 보니 하나의 페이지 안에서 component 끼리 routing 될 뿐이라서 저 이벤트가 호출되지 않는 듯 했습니다. (자세히 아시는 분은 댓글로 제보 부탁드립니다!!)

검색해보니 Angular 자체적으로 페이지를 나갈 때 처리해줄 수 있는 솔루션이 있더라구요.
router 의 canDeactivate !!!

canActivate 는 로그인하지 않은 사용자가 해당 페이지에 접근하지 못하게 막는 용도로 사용되는 경우를 많이 봤는데요, 페이지를 나갈 때 체크하는 용도로 canDeactivate 를 사용해 본 건 처음이었습니다.


시나리오를 말씀드리자면

1. CdnRegisterComponent 라는 페이지 컴포넌트에서 파일을 등록하다가 저장 버튼을 안 누르고
2. 브라우저 뒤로가기 버튼을 눌렀다!

이 경우에 알럿이 뜨게 하는 처리입니다.


1. CdnRegisterComponent 페이지에 저장될 파일이 있는지 없는지 판단할 flag 를 설정합니다. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
@Component({
    selector: 'app-cdn-register',
    templateUrl: './cdn-register.component.html',
    styleUrls: ['./cdn-register.component.scss']
})
export class CdnRegisterComponent implements OnInit {

.
.

public hasUnsavedData = false;

.
.

fileHandling( files ) {
        //파일이 들어온 경우 hasUnsavedData 가 있다고 표시해준다
        this.hasUnsavedData = true;
}

이 flag 는 public 이어야 합니다. 다른 service 에서 접근이 가능해야 하거든요!


2. 페이지를 떠날 때 감시하는(?) canDeactivate Service 를 만들어줍니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree} from '@angular/router';
import {Observable} from 'rxjs';
import {CdnRegisterComponent} from '../../pages/cdn/cdn-register/cdn-register.component';

@Injectable()
export class HasUnsavedDataGuard implements CanDeactivate<CdnRegisterComponent> {

    constructor() {}

    canDeactivate(
        component: CdnRegisterComponent,
        currentRoute: ActivatedRouteSnapshot,
        currentState: RouterStateSnapshot,
        nextState: RouterStateSnapshot
    ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
        //cdnRegisterComponent 페이지의 hasUnsavedData 가 true 즉 저장 안된 파일이 있다면
if(component.hasUnsavedData) { let confirmMsg = confirm('저장되지 않은 데이터가 있습니다. 계속하시겠습니까?'); if(confirmMsg) { //확인을 눌렀을 때 할 기능 구현부분 } return confirmMsg; } return true; } }

참조: https://angular.io/api/router/CanDeactivate



3. 해당 페이지가 세팅되어 있는 있는 router 에 canDeactivate 를 세팅해줍니다.

먼저 providers 에 해당 HasUnsavedDataGuard  Service 를 세팅해주고,

1
2
3
4
5
6
7
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
    providers: [HasUnsavedDataGuard]
})
export class PagesRouterModule {
}


해당 페이지 router 에 canDeactivate 를 세팅해줍니다.

1
 {path: 'cdn/register', component: CdnRegisterComponent, canDeactivate: [HasUnsavedDataGuard] },



이렇게 해서 기능이 완성되었습니다!!
이외에 canDeactivate 를 사용하는 다른 용도가 있다면 댓글로 공유 부탁드립니다~^^





댓글

주간 인기글

SPA(Sigle Page Applications) 란 무엇인가?

[앱 디자인] 디자인 가이드 만들기 - 안드로이드

[ubuntu] 신규 계정에 sudo 권한 추가하기

[앱 디자인] 디자인 가이드 만들기 - 아이폰

[MySQL] DB Time Zone 변경