如何在angular中使用路由器oulet仅使用惰性加载概念加载侧内容？

我得到的是导航到新页面。 我只想在仪表板页面中导航。 我得到的是： [1]: 我只想将内容加载到仪表板菜单的一侧。 但每当我单击路由器链接时，它就会导航到主组件。

HTML

仪表板模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { AllRestaurantsComponent } from './../all-restaurants/all-restaurants.component';
import { UsersComponent } from './../users/users.component';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { FormsModule }   from '@angular/forms';
import { DashboardLayoutComponent } from './dashboard-layout.component';

@NgModule({
  declarations: [
    AllRestaurantsComponent,
    UsersComponent,
  DashboardComponent,
  DashboardLayoutComponent
  ],
  imports: [
  FormsModule,
  CommonModule,
    DashboardRoutingModule
  ]
})
export class DashboardmoduleModule { }

应用程序路由模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {Routes, RouterModule} from '@angular/router';
import { AllRestaurantsComponent } from './../all-restaurants/all-restaurants.component';
import { UsersComponent } from './../users/users.component';
import { AuthGuard } from '../guard/auth.guard';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { DashboardLayoutComponent } from './dashboard-layout.component';

const routes:Routes =[

    {
      path:'', canActivate:[AuthGuard],
      component:DashboardLayoutComponent 
  } ,

  {
    path:'restaurants',canActivate:[AuthGuard],
    component:AllRestaurantsComponent,outlet:"side"
  },
  {
      path:'restaurants/:id',canActivate:[AuthGuard],
      component:AllRestaurantsComponent,outlet:"side"

    },
      {
        path:'users',canActivate:[AuthGuard],
        component:UsersComponent,outlet:"side"
      },
]




@NgModule({
  declarations: [],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule {}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import {SignUpRestaurantComponent} from './sign-up-restaurant/sign-up-restaurant.component';
// import { UserSignInComponent } from './user-sign-in/user-sign-in.component';
import { LoginComponent } from './login/login.component';
import {UserSignUpComponent} from './user-sign-up/user-sign-up.component'
import { AuthGuard } from './guard/auth.guard';
import { RestaurantComponent } from './restaurant/restaurant.component';


const routes: Routes = [
  {
    path:'home',
    component:HomeComponent
  },
  {
    path:'',
    redirectTo:'home',
    pathMatch:'full'
},
  {
    path:'login',
    component:LoginComponent
     },
    //  {

    //  },
     {
      path: 'dashboard',
      canActivate: [AuthGuard],
      loadChildren: './dashboard-layout/dashboardmodule.module#DashboardmoduleModule'
    },

  {
    path:'signUpRestaurant',
    component:SignUpRestaurantComponent
  },
  {
    path:'restaurant/:id',
    component:RestaurantComponent

  },


  {
    path:'signup',
    component:UserSignUpComponent

  },
  { 
    path:'**',
    component:HomeComponent

  }
];

@NgModule({
imports: [RouterModule.forRoot(routes,{useHash:true,scrollPositionRestoration:'enabled'})],

exports: [RouterModule]
})
export class AppRoutingModule { 

}

---

我只想加载仪表板菜单栏的一侧，但每当我单击导航链接时，它就会路由到新页面。

你在

应用程序仪表板上放了什么<代码>帐户详细信息

您可以编写应用程序仪表板中的所有路由。餐馆用户注销

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import {SignUpRestaurantComponent} from './sign-up-restaurant/sign-up-restaurant.component';
// import { UserSignInComponent } from './user-sign-in/user-sign-in.component';
import { LoginComponent } from './login/login.component';
import {UserSignUpComponent} from './user-sign-up/user-sign-up.component'
import { AuthGuard } from './guard/auth.guard';
import { RestaurantComponent } from './restaurant/restaurant.component';


const routes: Routes = [
  {
    path:'home',
    component:HomeComponent
  },
  {
    path:'',
    redirectTo:'home',
    pathMatch:'full'
},
  {
    path:'login',
    component:LoginComponent
     },
    //  {

    //  },
     {
      path: 'dashboard',
      canActivate: [AuthGuard],
      loadChildren: './dashboard-layout/dashboardmodule.module#DashboardmoduleModule'
    },

  {
    path:'signUpRestaurant',
    component:SignUpRestaurantComponent
  },
  {
    path:'restaurant/:id',
    component:RestaurantComponent

  },


  {
    path:'signup',
    component:UserSignUpComponent

  },
  { 
    path:'**',
    component:HomeComponent

  }
];

@NgModule({
imports: [RouterModule.forRoot(routes,{useHash:true,scrollPositionRestoration:'enabled'})],

exports: [RouterModule]
})
export class AppRoutingModule { 

}