路由子概念在角度 8 中不起作用答案

【问题标题】：Routing children concept not working in angular 8路由子概念在角度 8 中不起作用
【发布时间】：2020-04-10 20:55:19
【问题描述】：

我正在创建一个网站。在我的网站中，我正在尝试创建管理部分。在我的管理模块中，我有更多的组件，例如登录、仪表板、产品等..但是在我的代码管理页面中，但子部分无法正常工作比如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},
]
}
];

【问题讨论】：

标签： typescript angular7 angular2-routing angular8 angular7-router

【解决方案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}
]
}

【讨论】：