Я получаю переход на новую страницу. Я хочу перемещаться только по странице панели инструментов. То, что у меня есть: [1]: https://i.stack.imgur.com/mbwWW.jpg Я хочу загружать контент только на боковой панели меню. Но всякий раз, когда я нажимаю на ссылку маршрутизатора, он вместо этого перемещается к домашнему компоненту.
HTML
<div class="dashboard-main" style="display: flex;">
<div class="left">
<app-dashboard></app-dashboard>
</div>
<div class="right">
<div class="main-panel">
<router-outlet name="side"></router-outlet>
</div>
</div>
модуль маршрутизации на приборной панели
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 { 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 { 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 {
}
Я хочу загружать только боковую часть панели инструментов панели инструментов, но вместо этого всякий раз, когда я нажимаю на навигационную ссылку, это вместо этого маршрутизация на новые страницы.