0

Sidebar component is not responding properly when I navigate Internally

When I run onSubmit from my login.component.ts it goes to dashboard/home, 'home' view works fine and My sidebar component loads too but when I click sidebar-items, routerLink doesn't work, and neither the dropdown.

On my login,component.ts I have made a simple authenticate, which when successful will go to the dashboard route which has

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

and in my 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>

But the main problem is that when i navigate to this route, my Sidebar Component doesn't render and links don't work. I have tried even ngZone on my login submission

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

While this is my 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,
}]
}];

and for my app.component.ts

<router-outlet></router-outlet>

But it doesn't even work, I have tried many solutions and check web, can't find the proper answer. The issue is my sidebar-component doesn't work

Expected behavior

I want when I navigate internally to my dashboard route, my component should work properly and be responsive.

4

2 回答 2

1

将此脚本放在侧边栏组件中...然后尝试加载..

ngOnInit() {
    $(document).ready(() => {
      const trees: any = $('[data-widget="tree"]');
      trees.tree();
    });
  }
于 2018-02-26T14:50:15.683 回答
0

不幸的是，您没有发布组件代码。我假设 http 帖子来自您的登录组件。我相信问题是你的位置<router-outlet></router-outlet>。它应该放在您拥有的组件的 html 中this.router.navigate(['/dashboard']);。在您的情况下，登录组件。

于 2017-07-26T19:17:17.317 回答