Как загрузить сторонний контент только с концепцией отложенной загрузки в angular с использованием маршрутизатора oulet? - PullRequest
0 голосов
/ 20 марта 2020

Я получаю переход на новую страницу. Я хочу перемещаться только по странице панели инструментов. То, что у меня есть: [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 { 

}

Я хочу загружать только боковую часть панели инструментов панели инструментов, но вместо этого всякий раз, когда я нажимаю на навигационную ссылку, это вместо этого маршрутизация на новые страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...