Компонент боковой панели Angular 2 не работает при навигации по маршруту

Компонент боковой панели не отвечает должным образом при внутренней навигации

Когда я запускаю onSubmit из моего login.component.ts, он переходит на панель инструментов / дома, представление «домой» работает нормально, и компонент моей боковой панели тоже загружается, но когда я нажимаю элементы боковой панели, routerLink не работает, и ни выпадающий список.

На моем login,component.ts я сделал простую аутентификацию, которая в случае успеха перейдет к маршруту панели инструментов, который имеет

onSubmit(values){
    this.http.post('/user/authenticate', loginObj)
      .map((res) => res.json())
      .subscribe((res)=> {
        if(res.success == true){
          this.router.navigate(['/dashboard']);
        } else {
          ....
        }
}

и в моем dashboard.component.html

<div id="wrapper" >
  <app-sidebar ></app-sidebar>
      <div id="page-wrapper" class="gray-bg">
         <app-header></app-header>
      <router-outlet></router-outlet>
     </div>
</div>

Но основная проблема заключается в том, что когда я перехожу к этому маршруту, мой компонент боковой панели не отображается, а ссылки не работают. Я пробовал даже ngZone при входе в систему

this.zone.run(() => {
  this.router.navigate(['/dashboard']);
});

Пока это мой app.modules.ts

//setting up routes

const ROUTES = [
{
  path:'',
  redirectTo:'login',
  pathMatch:'full'
},
 {
   path:'login',
  component:LoginComponent
},{
  path:'dashboard',
    component:DashboardComponent,
  children:[
{
  path:'contacts',
  component:ContactsComponent
},{
  path:'home',
  component:HomeComponent,
}]
}];

и для моего app.component.ts

<router-outlet></router-outlet>

Но это даже не работает, я пробовал много решений и проверял в Интернете, не могу найти правильный ответ. Проблема в том, что мой компонент боковой панели не работает

Ожидаемое поведение

Я хочу, чтобы при внутреннем переходе к маршруту панели инструментов мой компонент работал правильно и реагировал.


angular angular-components angular-router
person Moeid Saleem Khan    schedule 26.07.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

поместите этот скрипт в компонент боковой панели... а затем попробуйте загрузить..

ngOnInit() {
    $(document).ready(() => {
      const trees: any = $('[data-widget="tree"]');
      trees.tree();
    });
  }
person Abhi Patil    schedule 26.02.2018
comment
Хотя это может ответить на вопрос, вы должны добавить объяснение к своему ответу. В чем была проблема ? Как ваш ответ должен решить проблему? - person Mickael; 26.02.2018
comment
проблема с моей боковой панелью была... страницу необходимо перезагрузить, чтобы боковая панель работала правильно... раньше при нажатии на элемент раздела боковой панели не открывались его подразделы... страницу необходимо перезагрузить - person Abhi Patil; 28.02.2018

arrow_upward
0
arrow_downward

К сожалению, вы не разместили свой код компонента. Я предполагаю, что сообщение http принадлежит вашему компоненту входа. Я считаю, что проблема в том, что вы разместили <router-outlet></router-outlet>. Он должен быть размещен в html компонента, где у вас есть this.router.navigate(['/dashboard']);. В вашем случае компонент входа.

person RKG    schedule 26.07.2017
comment
Пожалуйста, проверьте приведенный выше обновленный код, мой компонент боковой панели не загружает routerLink, когда я нажимаю, выпадающий список работает, но обычно, когда сайт перезагружается, он работает нормально, - person Moeid Saleem Khan; 26.07.2017
comment
Не уверен, что я понимаю точную проблему здесь. Можете ли вы создать плунжер с вашим кодом, пожалуйста? - person RKG; 26.07.2017