角度:未检测到儿童路线

Question

这是我的仪表板.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {JwtModule} from '@auth0/angular-jwt';
import {AuthService} from '../services/auth.service';
import {dashboardComponent} from './dashboard.component';
import { foodPollComponent } from '../modules/foodPoll/foodPoll.component';
import { dashboardModuleRoutingModule } from './dashboard.routing.module';
@NgModule({
imports: [
CommonModule, dashboardModuleRoutingModule
],
declarations: [
dashboardComponent,
foodPollComponent
],
providers: [JwtModule, AuthService]
})
export class dashboardModule { }

这是我的仪表板.路由.模块.ts

import { NgModule }     from '@angular/core';
import { Routes,
RouterModule } from '@angular/router';
import { dashboardComponent } from './dashboard.component';
import { foodPollComponent } from '../modules/foodPoll/foodPoll.component';
const routes: Routes = [
{
path: 'dashboard',
component:dashboardComponent
},
{
path: 'dashboard/:id',
component: dashboardComponent,
children: [
{
path: 'foodPoll',
component: foodPollComponent,
outlet: "details"
}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class dashboardModuleRoutingModule {}

这是我的仪表板组件.html

<div class="dashboard">
<header>Random header text</header>
<router-outlet name="details"></router-outler>
</div>

但是当我从localhost：4200/dashboard 更改为localhost：4200/dashboard/foodPoll时，路由器出口视图中没有任何渲染。视图仍与仪表板页面相同。

我哪里做错了？任何帮助将不胜感激。 谢谢

Answer 1

path: 'dashboard/:id',
component: dashboardComponent,
children: [
{
path: 'foodPoll',
component: foodPollComponent,
outlet: "details"
}
]

dashboardComponent将在网址上："dashboard/...anything.../"

foodPollComponent将在网址上："dashboard/...anything.../foodPoll"

:id- 是dashboardComponent的动态参数