H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】angualr4+adminLte写的后台,路由跳转后菜单无法展开

clipboard.png

这样的一个菜单,点击展开收起,动画效果是adminLte也就是bootstrap配合jq做出来的。

现在的问题是从登录页跳转到主页后这个动画不执行。但是刷新一下就可以,或者直接打开主页也可以执行,唯独从登录页跳转过来后不执行。

下面是我的路由配置

clipboard.png

直接打开 http://localhost/:4200/#/home/ 没有问题
http://localhost/:4200/#/login/ 跳转到home就会发生不执行的情况。

回答:

今天刚好遇到这个问题看了一下adminlte源码,对于v3.0.1版本是第849行-853行

$(window).on(Event.LOAD_DATA_API, function () {
  $(Selector.DATA_WIDGET).each(function () {
    Treeview._jQueryInterface.call($(this), 'init');
  });
});

adminlte会在$(window).on('load.lte.treeview')的时候执行左边菜单初始化。
当页面初始路由是/login,此时左侧菜单的dom还没有加载,$(Selector.DATA_WIDGET)是拿不到菜单的,这个时候adminlte认为这个页面没有用到左侧菜单模块。当路由跳转到/,这个时候左侧菜单挂载到dom,但是adminlte不会再次触发$(window).on('load.lte.treeview')
结论就是如果window.onload的时候左侧菜单已挂载,那么问题不大;
反正就需要手动去触发window监听的load.lte.treeview事件。

gularJS解决方案

$scope.$on('$viewContentLoaded', function(event, viewConfig){ 
    $(window).trigger('load.lte.treeview')
});

Vue解决方案

mounted(){
    $(window).trigger('load.lte.treeview')
}

React解决方案

componentDidMount(){
    $(window).trigger('load.lte.treeview')
}

回答:

你这个动画的执行可能是根据页面是否已经加载完成判断的,找到这个判断修改一下

回答:

你这个动画是在什么时候触发的? ngOnInit(), ngAfterViewInit() ?

回答:

你是怎么解决的
我也有同样的问题

本文地址:H5W3 » 【前端问题精选】angualr4+adminLte写的后台,路由跳转后菜单无法展开

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址