Angular 6 Неожиданное поведение при получении доступа к дочернему компоненту родительского компонента с использованием отложенного кодирования - PullRequest
Новая
       14

Angular 6 Неожиданное поведение при получении доступа к дочернему компоненту родительского компонента с использованием отложенного кодирования

0 голосов
/ 31 августа 2018

Я работаю над системой регистрации, использующей Angular 6. База AppModule содержит следующие маршруты, и они работают правильно: 

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path:'',
    component: LoginComponent
  },
  {
    path: 'forgot',
    component: ForgotPasswordComponent
    //canActivate: [AuthGuardService]
  },
  {
    path:'dashboard',
    loadChildren: '../app/dashboard/dashboard.module#DashboardModule'

  },
  {
    path: '**',
    redirectTo: 'login',
    pathMatch: 'full'
  }
];

Как видите, я использую концепцию отложенной загрузки, в которой я создал новый модуль и компонент с именем dashboard, содержащий скрипт маршрутов dashboard-routing.module.ts: 

const routes: Routes = [
  {
    path:'',
    component: DashboardComponent,
  },
  {
    path:'home',
    loadChildren: './main-navbar/main-navbar.module#MainNavbarModule'

  },
  {
    path:'**',
    redirectTo: '',
    pathMatch: 'full'
  }
];

Как вы видите, я снова использую ленивую загрузку внутри компонента панели мониторинга, и внутри него я создал последний модуль / компонент с именем main-navbar.component, в котором эта часть, все остальные после компонента входа в систему будут выполняться.

Структура теперь выглядит следующим образом:

enter image description here

Вот поршень, чтобы проверить его .

И для простоты я удалил компоненты логина и забыл пароль, чтобы вы могли напрямую проверить компонент панели управления .

То, что идет не так, описывается следующим образом:

После входа в систему пользователь увидит следующий URL-адрес без ошибок:

localhost:4200/dashboard

Где панель инструментов содержит компонент main-navbar:

enter image description here

enter image description here

Теперь мне нужно отобразить другие компоненты внутри этой страницы, поэтому, если URL-адрес:

localhost:4200/dashboard/home

Я перенаправлен на компонент входа в систему и не получаю ошибок. Я думаю, проблема в том, как я обрабатываю файлы маршрутизации и куда я помещаю элементы <router-outlet>, но не могу понять это.

1 Ответ

0 голосов
/ 31 августа 2018

Попробуйте это в dashboard-routing.module.ts: 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      {
        path: 'home',
        loadChildren: './main-navbar/main-navbar.module#MainNavbarModule'

      }
    ]
  }
];

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