Angular：未检测到子路由

Question

这是我的dashboard.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 { }

这是我的dashboard.routing.module.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 {}

这是我的dashboard.component.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 将在 url 上："dashboard/...anything.../"

foodPollComponent 会在 url 上："dashboard/...anything.../foodPoll"

:id - 是 dashboardComponent

的动态参数