2

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

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

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

来源（以 chrome 呈现，折叠以保持较小）： 以 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。

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

4

4 回答 4

3

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

function getAdminLTE() {
    return $.AdminLTE
}

在我的打字稿中，我有

declare var getAdminLTE: any;

对于我的 Home 组件，我有

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

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

于 2016-04-30T18:00:06.207 回答
1

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

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

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

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

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

于 2018-05-08T16:20:02.403 回答
0

我这样做如下：

声明AdminLTE：

declare var adminlte: any;

来电：fixLayoutHeight_ngOnInit

ngOnInit() {
   new adminlte.Layout(document).fixLayoutHeight();
}
于 2018-11-18T10:22:19.213 回答
0

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

ngAfterViewInit() {
   jQuery('body').layout('fix');
}
于 2018-10-02T04:35:54.770 回答