angular2로 loading overlay 표시하기

primeng 에서도 angular2 컴포넌트에서도 loading을 표시해주기 위한 적절한 ui를 못찾았다. iPhone 개발 컴포넌트에는 있든데…

허접하게나마 표시해주기 위해 뭔가가 필요했다.
일단 ng2-ui 로 가능해보였다.

이렇게 해주면 비슷하게 모양이 나오는데, overlayManager.open 메소드를 콜해줄 수가 없다.
내가 원하는 것은 비동기로 rest api를 호출한뒤, 리턴이 오는 시간까지 화면에 ‘Loading…’이라는 메시지를 뿌려주려는 것이다.
따라서 overlay를 rest api 호출 로직 후반부에서 띄워줘야하고, 결과를 수신하는 부분에서 내려줘야한다.
그런데 overlayManager의 메소르를 콜하는 방법을 아직은 모른다.

다시 primeng로 돌아왔는데,  primeng 데모페이지의 overlay 섹션에 있는 녀석들이 적절해 보이는데, 화면 한 가운데 뜨는게 아니라 마우스 옆에 뜨고…
그래서 다이얼로그를 손봐서 하기로 했다.

위와 같이 해주고 컨트롤 코드를 이용하여 “onLoading” 변수 값만 조절해주면 쉽게 구현이 가능하다.

map의 스크롤 이벤트 처리

다음 지도를 이용하여 화면에 지도를 띄워줬는데,  지도를 확대하기 위해 스크롤 하면 화면 전체가 스크롤되는 문제가 있다. javascript에 문외한이기 때문에 마음의 준비를 했다. 한참 헤매겠구나…

그런데 의외로 간단히 해결됨. event의  propagation을 차단하면 된다.

 

angluar2에서 외부 js 파일 이용하기

화면에 지도를 띄우려하니, 당면한 도전은 angular2에서 외부 js파일의 함수를 호출하는것이다. angular2의 template와 html 파일에서는 script 태그를 인식하지 못하기 때문에 조치를 해줘야 한다.

맞는 방법인지는 모르나 아래와 같이 해결할 수 있다. 일단 index.html 파일에 내가 원하는 외부 js 파일을 include 한다.

그리고, 내가 원하는 app/~.component.ts 파일의 최상단부에 호출을 원하는 메쏘드를 선언한다. 이미 앞서의 index.html 파일에 javascript를 include 했기 때문인지 단순히 include 해주기만 하면된다.

*.component.html 에는 일반 html코드 내용을 적절히 추가해준다.