Angular 2 个侧边栏组件在路由导航上不起作用

Question

当我在内部导航时侧边栏组件没有正确响应

当我从我的 login.component.ts 运行 onSubmit 转到 dashboard/home 时，'home' 视图工作正常并且我的边栏组件也加载但是当我单击侧边栏项目，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>

但它甚至不起作用，我尝试了很多解决方案并检查了网络，找不到合适的答案。问题是我的侧边栏组件不工作

预期行为

我希望当我在内部导航到我的仪表板路线时，我的组件应该正常工作并响应。

Answer 1

很遗憾，您没有post您的组件代码。我假设 http post 来自您的登录组件。我认为问题出在 <router-outlet></router-outlet> 的位置。它应该放在 this.router.navigate(['/dashboard']); 所在组件的 html 中。在您的例子中，登录组件。

Answer 2

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

ngOnInit() {
    $(document).ready(() => {
      const trees: any = $('[data-widget="tree"]');
      trees.tree();
    });
  }

Angular 2 个侧边栏组件在路由导航上不起作用

Angular 2 sidebar component not working on route navigate

angular-components

angular

angular-router