AdminLTE 和 AngularJS 内容包装器的最小高度错误答案

【问题标题】：AdminLTE and AngularJS content wrapper wrong min-heightAdminLTE 和 AngularJS 内容包装器的最小高度错误
【发布时间】：2016-02-22 14:46:33
【问题描述】：

我正在尝试将 AngularJS（和 ui.router）与此模板一起用于部分和模板。（使其成为单页）。

虽然我的页面渲染得很好，但 .content-wrapper div 标签在与 angular 一起使用时会得到错误的 min-height 属性 (564px;)。但是当我查看starter.html，示例页面时，它很好（494px;）。

有人可以向我解释为什么会这样吗？这是引导程序吗？角度还是主题？还是组合？

来源（以 chrome 呈现，折叠以保持较小）：

在更大的屏幕上观看时也是如此。页脚现在从屏幕上掉下来，在视口之外，并出现一个滚动条，但没有内容，因为它只是用于测试目的的页眉。

有人知道去哪里看吗？

编辑：

我发现了问题所在，我还没有找到解决方案：

在主题使用的app.js中有如下代码：

 var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
 var window_height = $(window).height();

我将这段代码放在页面底部的脚本标签中，并从中发出警报：

<script>
    var head = $('.main-header').outerHeight();
    var foot = $('.main-footer').outerHeight();
    var window_height = $(window).height();
    alert("Header: " + head + " Footer: " + foot + " Window: " + window_height);
</script>

页眉高度为 NULL，页脚为 31，窗口为 595。当我在控制台中单独执行这些命令时（页面完全呈现后）它给我：页眉：50，页脚：51，窗口高度 595。（ 51 + 50 = 101。595 - 101 = 494。这是正确的内容包装高度）。

所以 JQuery 不能决定页眉和页脚的高度，可能是因为它们还没有渲染。所以这可能是一个 ui.router/Angular 问题？

我首先加载 angular 和 angular ui 路由器，然后加载我的 angular 脚本。然后是 JQuery、bootstrap，最后是主题的 app.js。

有人知道怎么解决吗？

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap-3 adminlte

【解决方案1】：

所以我使用的是AngularJs2，但我认为问题是一样的。我设法弄清楚的方法是我在app.js 中创建了一个函数，以便 AdminLTE 拥有一个函数

function getAdminLTE() {
    return $.AdminLTE
}

在我的打字稿中我有

declare var getAdminLTE: any;

对于我的 Home 组件，我有

ngOnInit() {
    getAdminLTE().layout.fix()
}

这将在 home 组件渲染后修复布局。不确定有更好的方法来实现这一点，但我认为您在描述中抓住了问题的本质。

【讨论】：

【解决方案2】：

Angular 1.x 和 AdminLTE 2.4.3 的解决方案：

在每个 HTML 页面下方，包含以下脚本：

<script>
    $('body').layout('fix');
</script>

此解决方案也适用于将 $.AdminLTE 设置为 undefined 的人。

几乎花了一整天的时间找出解决方案。希望它可以帮助某人。

【讨论】：

【解决方案3】：

对于 Angular 6 在您的 app.ts 文件中声明 var jQuery: any; 那么

ngAfterViewInit() {
   jQuery('body').layout('fix');
}

【讨论】：

【解决方案4】：

我这样做：

声明AdminLTE:

declare var adminlte: any;

在ngOnInit 中致电fixLayoutHeight：

ngOnInit() {
   new adminlte.Layout(document).fixLayoutHeight();
}

【讨论】：