Концепция маршрутизации детей не работает в angular 8

Question

Я создаю веб-сайт. На своем веб-сайте я пытаюсь создать административную часть. Внутри моего административного модуля у меня есть еще один компонент, такой как логин, панель инструментов, продукты и т. Д., Но в моем коде страница администратора появляется, но дочерняя часть не работает например http://localhost: 4200 / admin / adminlogin и http://localhost: 4200 / admin / admindashboard . Я не знаю, как использовать детей внутри маршрутизации. Просто я пытался, но не работает. Любой может найти мою ошибку в моем коде.

Демо: https://stackblitz.com/edit/angular-fixed-footer-header-zhdjw9?file=app / admin / admin.component. html

app.routing.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component'
import { AboutComponent } from './about/about.component'
import { LoginComponent } from './login/login.component';
import { AdminComponent } from './admin/admin.component';
const routes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent,
},
{
path: 'about',
component: AboutComponent,
},
{
path: 'login',
component: LoginComponent,
},
{
path: 'admin',
component: AdminComponent,
}
];

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

admin.routing.ts:

const routes: Routes = [ 
{
path: 'admin', component: AdminComponent, children: [
  { path: 'adminlogin', component: AdminLoginComponent},
  { path: 'admindashboard', component: AdminDashboardComponent},
]
}
];

Answer 1

Не работает из-за конфликта между путями для администратора, который указан в двух местах. Один находится в вашем файле * .module.ts, а другой - в * routing.module.ts. В обоих файлах, которые вы указали path = "/ admin", и в маршрутизации вы также объявили дочерний путь. Но во время работы он берет из файла * .module.ts. Чтобы решить проблему, либо объявите своих детей в * .module.ts и очистите routing.module.ts, либо переместите весь массив маршрутизации в файле маршрутизации из * .module. TS файл. Это решит вашу проблему. Вы можете дать этот код снимка в файле * module.ts

    {
path: 'admin',
component: AdminComponent,children: [
  { path: 'adminlogin', component: AdminLoginComponent},
  { path: 'admindashboard', component: AdminDashboardComponent}
]
}