각 라우팅 가드의 사용자 정의 대화 상자

Question

각도 2/4에서 라우팅 경고를 작성하여 표준 경고 등을 사용하여 CanActivate 라우팅 가드를 구현하고 메시지를 표시 할 수 있음을 알고 있습니다. 그러나 쓸 수 있는지 궁금합니다 자체 HTML/CSS/TS가있는 구성 요소를 사용하여 대화 상자를 응용 프로그램의 테마에 맞게 만들거나 백엔드 서비스에서 표시 할 텍스트를 가져올 수도 있습니다.

나는 둘러 볼 수있는 HTML/CSS/TS 파일이있는 대화 상자를 사용하여 라우팅 가드를 작성하는 방법의 예를 찾을 수 없었습니다.

내가 수정 한 것을 볼 수있는 작은 예제가 있습니까? 많은 감사

Answer 1

JS를 사용하여 경로 자체에서 body 태그에 요소를 만들거나 추가 할 수 있습니다. 아래 JS를 사용하거나 this.el에 클래스를 추가하고 기본 스타일 시트에서 CSS를 사용하여 요소 스타일을 지정할 수 있습니다.

import { Injectable }    from '@angular/core'; 
import { CanActivate , Router}  from '@angular/router'; 

@Injectable() 
export class LoginGuard implements CanActivate { 
    constructor(
     public ngRouter: Router 
    ){} 

    private el 

    async canActivate() { 
     try { 
      this.showLoader() 
      await yourAsyncScript()  
      return true 
     } catch (err) { 
      this.ngRouter.navigate(['/']) 
      return false 
     } finally { 
      this.removeLoader() 
     }  
    } 


    showLoader(){ 
     this.el = document.createElement('div') 
     this.el.innerHTML = ` 
      <div>Loading...</div> 
     ` 
     this.el.style.cssText = ` 
      user-select: none; 
      position: fixed; 
      z-index: 50000; 
      top: 0; 
      left: 0; 
      bottom: 0; 
      right: 0; 
      color: black; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
     ` 
     document.body.appendChild(this.el) 
    } 

    removeLoader(){ 
     if (this.el) { 
      document.body.removeChild(this.el) 
      this.el = null 
     } 
    } 

}