angular2로 loading overlay 표시하기

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

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

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

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

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

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다