子路由模块未在同一页面中加载内容

Posted 2023-02-23

【中文标题】子路由模块未在同一页面中加载内容

【英文标题】：Child routing module not loading the content in the same page

【发布时间】：2017-11-21 01:21:25

【问题描述】：

我正在开发使用 angular 2 指示的小型应用程序。[身份验证 + 2 个屏幕]，我在管理路由参数时遇到问题。

我对路由文件、app.routing.ts 主体和子路由文件 admin.routing.ts 进行了设置，每当我成功通过身份验证时，都会进行重定向设置为 home 路径，在此页面中，我必须使用由子路由器管理的组件，每当我单击链接时，我都希望在同一屏幕上加载内容，但路由器会重新加载整个页面。

app.routing.ts

      const  appRoutes: Routes = [
      
        path: 'home',
        component : HomeComponent,
        canActivate : [AuthGard]
      ,
      
        path: 'login',
        component : LoginComponent
      ,
      
        path: 'not-found',
        component: NotFoundComponent
      ,
      
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
      ,
      
        path: '**',
        redirectTo : 'not-found',
        pathMatch: 'full'
      
  ];

  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

adminRouting.ts（子）

  const  appRoutes: Routes = [

  
    path: 'add-merchant-admin',
    component : AddMerchantAdminComponent,
    canActivate : [AuthGard]
  ,
  
    path: 'list-merchant-admin',
    component : ListMerchantAdminComponent,
    canActivate : [AuthGard]
  
];

home.component.html

<app-template-component></app-template-component>
<app-sidebar-nav></app-sidebar-nav>

template.component.html

 <div class="wrapper">
  <div class="main-panel">

    <app-nav-bar></app-nav-bar>

    <div class="content">
      <div class="container-fluid">
          <router-outlet></router-outlet> ** Content expected to be loaded here  **
      </div>
    </div>

    <footer class="footer">
      <div class="container-fluid">
        <div class="copyright pull-right">
          &copy; <script>document.write(new Date().getFullYear())</script> S2M 2017
        </div>
      </div>
    </footer>

     </div>
</div>

图

不是在指定位置加载内容，而是加载另一个页面。

【参考方案1】：

子路由应该是这样定义的

const  appRoutes: Routes = [
      
        path: 'home',
        component : HomeComponent,
        canActivate : [AuthGard],
        children:[
        
             path:'', 
             component:ChildComponent,
             children: appRoutesChild
         
        ]
      ,
      
        path: 'login',
        component : LoginComponent
      ,
      
        path: 'not-found',
        component: NotFoundComponent
      ,
      
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
      ,
      
        path: '**',
        redirectTo : 'not-found',
        pathMatch: 'full'
      
  ];