角度ルーティングガードのカスタムダイアログ

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 
     } 
    } 

}