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

Question

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

虽然我的网页呈现正常，但.content-wrapper div标记在与angular一起使用时会获得错误的min-height属性（564px;）。但是当我查看starter.html，样本页面时，它的罚款（494px;）。

有人可以向我解释为什么会这样做吗？这是Bootstrap吗？角度还是主题？还是一个组合？

来源（在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问题？

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

任何人都知道如何解决这个问题？

Answer 1

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

function getAdminLTE() {
    return $.AdminLTE
}

在我的打字稿中我有

declare var getAdminLTE: any;

我的家庭组件

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

这将在渲染主组件后修复布局。不确定一个更好的方法来实现这一目标，但我认为你在描述中捕获了问题的本质。

Answer 2

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

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

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

此解决方案也适用于 $。AdminLTE 未定义的人。

几乎花了整整一天来确定解决方案。希望它对某人有所帮助。

Answer 3

对于Angular 6 在您的app.ts文件中 声明var jQuery：any; 然后

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

Answer 4

我这样做如下：

声明AdminLTE：

declare var adminlte: any;

在fixLayoutHeight中致电ngOnInit：

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