ASP.NET MVC 和 Angular 4 mini SPA - 页脚问题答案

【问题标题】：ASP.NET MVC and Angular 4 mini SPA - Footer issueASP.NET MVC 和 Angular 4 mini SPA - 页脚问题
【发布时间】：2018-05-14 01:36:09
【问题描述】：

应用背景：我的应用是使用 ASP .net MVC（.net framework 4.6）和几个 Angular 4 mini SPA 构建的

Mini SPA 从其中一个视图加载，例如 Subscription.cshtml。请在下面的代码中注意我的 cmets：

@section styles{
    <link href="~/apps/userSubscription/styles.e8e9c3a3817e92de1e39.bundle.css" rel="stylesheet" />
}
@*This is mini SPA*@
<sb-subcription-app-root>
    @*This is loader to show while mini SPA is bootstrapped*@
    <div class="loading-icon">
        <div class="text-center">
            <i class="fa fa-spinner fa-spin fa-fw" style="font-size:55px;"></i>
        </div>
    </div>
</sb-subcription-app-root>

@section scripts{
    <script src="~/apps/userSubscription/inline.4306fb1489008775a724.bundle.js"></script>
    <script src="~/apps/userSubscription/polyfills.b92561b85131ad96e15f.bundle.js"></script>
    <script src="~/apps/userSubscription/vendor.d7d84c623190e8bb1494.bundle.js"></script>
    <script src="~/apps/userSubscription/main.c9d275f7937435642d76.bundle.js"></script>
}

问题：页脚被推到顶部。我的页脚在_Layout.cshtml:

<footer class="footer">
    <div class="top-footer">
        <div class="container">
        </div>
    </div>
</footer>

问题描述：

当视图 Subscription.cshtml 正在加载时。 UI 如下图所示。我相信此时我的角度应用程序正在被引导
Angular 应用程序启动后，加载器消失（我认为这是正确的），然后 页脚被推到顶部 2-3 秒，直到如图所示加载 DOM p>

我需要什么：我想隐藏页脚，直到加载 DOM（包括 angular mini SPA）。任何 CSS 和 JS 解决方案都适合我。

【问题讨论】：

有什么建议/帮助吗？

标签： javascript css asp.net-mvc angular

【解决方案1】：

作为一种解决方法，您可以尝试以下方法。

1) 默认隐藏页脚：

<footer class="footer hide" id="footer">

2) 标记在显示页脚之前必须呈现的元素：

<div id="bootstraper">

3) 运行 javascript 轮询过程以切换页脚可见性：

(function() {
  var timer = setInterval(function() {    
     if(document.getElementById('bootstraper')) {
       clearInterval(timer);
       document.getElementById('footer').classList.remove("hide");
     }
  }, 40);
})();

如您所见，我们只是在某些（需要的）元素被渲染并可以通过document 访问之后显示页脚。这个解决方案有点老套，我建议您寻找一种更适合您的情况和环境的方法。这需要更深入的研究：

谁加载延迟了 2-3 秒的 DOM？
如果是 Angular App 的职责，那么 App 必须处理这个过程；
而且这个过程可能不仅仅是一个原始的轮询，例如延迟实体本身可能会告诉它已经完成......
也许DOMContentLoaded 事件就足够了？（仅在触发时显示页脚）

【讨论】：