角度路由保护中的自定义对话框答案

【问题标题】：Custom dialog in angular routing guard角度路由保护中的自定义对话框
【发布时间】：2017-10-27 15:14:54
【问题描述】：

在 Angular 2/4 中，我知道我可以编写一个路由保护来实现 CanActivate 路由保护并使用标准警报等显示消息......但我想知道是否可以使用自己的 HTML 编写组件/CSS/TS 以便我可以让对话框适合应用程序的主题，甚至可以从后端服务中提取要显示的文本。

我试图环顾四周，但找不到任何示例，说明如何编写带有可以显示的 HTML/CSS/TS 文件对话框的路由保护。

是否有任何人有我可以查看以进一步修改的小示例？非常感谢

【问题讨论】：

标签： angular angular2-routing

【解决方案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
        }
    }

}

【讨论】：