treeview can't expand at angular8

[magicdict]

Issue type:

• [ ] Feature request
• [x] Bug report
• [ ] Documentation

Environment:

• AdminLTE Version: 2.4.15
• Operating System: windows7
• Browser (Version): Chrome (Latest)

Description:

        <li class="treeview">
          <a href="#">
            <i class="fa fa-edit"></i> <span>出发地</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li [class.active]="_path ==='/traffic/simplesourcemap'"><a href="traffic/simplesourcemap"><i
                  class="fa fa-link"></i> <span>出发地分析</span></a></li>
            <li [class.active]="_path ==='/traffic/sourcemap'"><a href="traffic/sourcemap"><i class="fa fa-link"></i>
                <span>出发地分析[分时]</span></a></li>
            <li [class.active]="_path ==='/traffic/weeklysourcemap'"><a href="traffic/weeklysourcemap"><i
                  class="fa fa-link"></i>
                <span>出发地分析[周次]</span></a></li>
          </ul>
        </li>

const routes: Routes = [
  {
    path: 'traffic', component: TrafficMainComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent, resolve: { data: DashBoardResolver } },
      { path: 'timeanalysis', component: TimeAnalysisComponent, resolve: { data: TimeAnaysisResolver } },
      { path: 'simplesourcemap', component: SimpleMapComponent, resolve: { data: SimpleSourceMapResolver } },
      { path: 'simpledestmap', component: SimpleMapComponent , resolve: { data: SimpleDestMapResolver } },
      { path: 'sourcemap', component: TimeLineMapComponent, resolve: { data: SourceMapResolver } },
      { path: 'destmap', component: TimeLineMapComponent , resolve: { data: DestMapResolver } },
      { path: 'weeklysourcemap', component: TimeLineMapWeekNoComponent, resolve: { data: SourceMapWeeKnoResolver } },
      { path: 'weeklydestmap', component: TimeLineMapWeekNoComponent, resolve: { data: DestMapWeeKnoResolver } },
      { path: 'trace', component: TraceMapComponent, resolve: { data: TraceResolver }  },
      { path: 'calendar', component: CalendarComponent , resolve: { data: CalendarResolver } },
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
    ]
  }
];

The treeview menu sometimes work well,but some times,the page jump to '/#' page when click the (#)link.

[magicdict]

When I modify the

<a href="#">

to

 <a href="javascript:void(0)">

the link stop jump ,but treeview does not work...

[REJack]

Did you loaded/init the treeview plugin?

[magicdict]

I don't understand how to loaded/init the treeview plugin? Sometime it works,sometime when click the # link,page jump to "/"

[magicdict]

[REJack]

Do you recieve any error in the dev debug console?

[magicdict]

Do you recieve any error in the dev debug console? no any error... I check your demo,when the link endwith "#" is clicked,the page jump is not happen. I think the problem is happened by angular routing system. "#" link fires jump,

[magicdict]

would you kindly help me with this problem.I really want to use tree-menu. http://39.105.206.6 is the menu of the demo. Click the left Item and enter the main page.

Then you can find the problem menu.

[REJack]

I've checked your demo, it looks like your app doesn't init the treeview plugin, if I run $('[data-widget="tree"]').tree() via dev console it works may you need to run it on every page load (may you need to init other plugins too).

[magicdict]

I've checked your demo, it looks like your app doesn't init the treeview plugin, if I run $('[data-widget="tree"]').tree() via dev console it works may you need to run it on every page load (may you need to init other plugins too).

Thank you for your reply,I will modify it.

[magicdict]

sorry,How to deal with this issue?

[REJack]

Did you run your custom code after injecting AdminLTE's js files?

[magicdict]

            "scripts": [
              "./node_modules/admin-lte/bower_components/jquery/dist/jquery.min.js",
              "./node_modules/admin-lte/bower_components/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/admin-lte/dist/js/adminlte.min.js"
            ]

I import the js when angular setup, if I miss some js file?

[REJack]

This looks good, where you run the $('[data-widget="tree"]').tree() in your ngOnInit()?

May you can post me the imports of the file with the code snippet too 😄 I guess you doesn't import adminlte but jquery is imported

[magicdict]

The module.ts file

import { NgModule } from '@angular/core';
import { TrafficRoutingModule } from './traffic-routing.module';
import { TimeAnaysisResolver, SourceMapResolver, DestMapResolver, DashBoardResolver, 
  CalendarResolver, SimpleDestMapResolver, SimpleSourceMapResolver, TraceResolver, SourceMapWeeKnoResolver, DestMapWeeKnoResolver } from './resolver.service';
import { CommonFunction } from '../Common/common';
import { HttpClientModule } from '@angular/common/http';
import { MyCommonModule } from '../Common/MyCommon.module';

import { TrafficMainComponent } from './TrafficMain/TrafficMain.component';
import { TimeAnalysisComponent } from './TimeAnalysis/TimeAnalysis.component';
import { NgxEchartsModule } from 'ngx-echarts';

import { TimeLineMapComponent } from './SourceDestMap/TimeLineMap.component';
import { DashboardComponent } from './Dashboard/Dashboard.component';
import { CalendarComponent } from './Calendar/Calendar.component';
import { SimpleMapComponent } from './SourceDestMap/SimpleMap.component';
import { TraceMapComponent } from './SourceDestMap/TraceMap.component';
import { TimeLineMapWeekNoComponent } from './SourceDestMap/TimeLineMapWeekNo.component';

import { TabViewModule } from 'primeng/tabview';

@NgModule({
  declarations: [
    TrafficMainComponent,
    DashboardComponent,
    TimeLineMapComponent,
    TimeLineMapWeekNoComponent,
    SimpleMapComponent,
    TraceMapComponent,
    TimeAnalysisComponent,
    CalendarComponent
  ],
  imports: [
    TrafficRoutingModule,
    HttpClientModule,
    MyCommonModule,
    NgxEchartsModule,
    TabViewModule,
  ],
  providers: [
    CommonFunction,
    DashBoardResolver,
    TimeAnaysisResolver,
    SimpleSourceMapResolver,
    SimpleDestMapResolver,
    SourceMapResolver,
    DestMapResolver,
    SourceMapWeeKnoResolver,
    DestMapWeeKnoResolver,
    CalendarResolver,
    TraceResolver
  ],
  bootstrap: [TrafficMainComponent]
})
export class TrafficModule { }

The main.ts file

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'echarts-gl';
import 'echarts/dist/extension/bmap.min.js';
import 'echarts-bmap';
import 'admin-lte';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

[magicdict]

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './TrafficMain.component.html',
})
export class TrafficMainComponent implements OnInit {
  constructor(private route: ActivatedRoute) { }
  _path = "";
  ngOnInit(): void {
    this._path = this.route.snapshot["_routerState"].url;
    $('[data-widget="tree"]').tree();
  }
}

[REJack]

Try to place import 'admin-lte'; after jquery or may you need to change it something like this import * 'admin-lte';.

[magicdict]

Thank you ,but the tree does not work....

[magicdict]

console.log for let x = $('[data-widget="tree"]'); x has no tree function

via dev console, tree function is appear..

[REJack]

Try to add declare var $: any; after your jquery import, but if I'm right caused that you added jquery bootstrap and adminlte in your scripts array you not need to import it via .ts you can also try to remove jquery and adminlte import and add the declare.

[magicdict]

sometime ,the $('[data-widget="tree"]'); is sidebar-menu.tree when it works

sometime ,the $('[data-widget="tree"]'); is sidebar-menu. when it does not works

I think it is angular issue....angular create dom dynamiclly...

[magicdict]

Thank you for discuss with you,I think angular can't use treeview feature....

[REJack]

try to place this code inside ngAfterViewInit() some user place it there.

[magicdict]

ngAfterViewInit does not work....

[REJack]

Ok :/ now I have no more ideas

[magicdict]

Can you tell me what is the difference dev console and angular typescript code. when I run $('[data-widget="tree"]'); dev console return the object with tree function. but when I write code in angular with typescript , the object has no tree function.

[REJack]

May the onInit() run before the adminlte injection via scripts array is avaiable or they are seperated, but I don't know it right I doesn't use angular.

[magicdict]

I found a article about adminlte and angular.The author says that there is a bug in tree.js source code. Would you kindly check it ?

https://blog.csdn.net/u013291057/article/details/74644782

[magicdict]

https://github.com/ColorlibHQ/AdminLTE/issues/2094 Great!

[magicdict]

            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/jquery-ui-dist/jquery-ui.js",
              "./node_modules/admin-lte/bower_components/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/admin-lte/dist/js/adminlte.min.js"
            ]

import { Component, OnInit} from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './TrafficMain.component.html',
})
export class TrafficMainComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    $(document).ready(() => {
      const trees: any = $('[data-widget="tree"]');
      if (trees) {
        trees.tree();
      }
    });
  }
}