ng-simple-sidebar点击侧边栏项未在指定区域加载组件如何解决

问题排查与解决步骤 #

1. 路由配置错误：缺少嵌套子路由结构

当前你的所有路由均为根级平级路由，匹配到/user/signin这类路径时，Angular会直接替换根组件下的<router-outlet>内容，导致整页跳转。需将用户相关路由配置为HomeComponent的子路由，子路由匹配的组件会自动渲染到HomeComponent内部的<router-outlet>中，也就是你指定的2区内容位置。
修改后路由配置参考：

const routes: Routes = [
  {
    path: "", 
    component: HomeComponent,
    children: [
      // 可配置根路径默认跳转规则
      { path: "", redirectTo: "user/welcome", pathMatch: "full" },
      { path: "user/signin", component: loginComponent },
      { path: "user/welcome", component: WelcomeComponent },
      { path: "user/profile", component: ProfileComponent },
    ]
  },
];

2. 侧边栏routerLink路径配置错误

你当前使用的../../xxx相对路径容易出现路径计算偏差，建议直接使用绝对路径（路径前加/表示从根路由开始匹配），修改侧边栏配置如下：

constructor(private ngSimpleSidebarService: NgSimpleSidebarService) {
    this.defaultSidebarItems = [
        {
            name: 'Welcome',
            icon: 'fas fa-camera fa-xs',
            routerLink: ['/user/welcome'],
            position: 'top',
        },
        {
            name: 'About',
            icon: 'fas fa-camera fa-xs',
            routerLink: ['/user/signin'],
            position: 'top',
        },
        
    ];
    this.ngSimpleSidebarService.addItems(this.defaultSidebarItems);
    this.ngSimpleSidebarService.configure(this.defaultSidebarConfig);
}

3. 检查HomeComponent模板配置

确认HomeComponent的html模板中，在你预期的2区内容位置添加了<router-outlet>标签，该标签是Angular用来承载子路由组件的容器，缺少的话子组件无法正常渲染。

4. 侧边栏配置校验

确认ng-simple-sidebar的全局配置defaultSidebarConfig中没有强制开启原生跳转的参数，比如target: '_blank'这类配置，会导致点击后打开新页面。

内容的提问来源于stack exchange，提问作者Illep