angualr4+adminLte写的后台，路由跳转后菜单无法展开

Question

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

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

下面是我的路由配置

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

Answer 1

今天刚好遇到这个问题看了一下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')
}

Answer 2

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

Answer 3

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

Answer 4

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