angular - 添加子路由后，下拉菜单在 Angular 中不起作用

Question

这是我的 app.component.html 的一部分（这里我添加了代码路由器出口的结尾）

 <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" routerLink='courses' routerLinkActive='active'
               id="navbardrop" data-toggle="dropdown" >
                Courses
              </a>

              <div class="dropdown-menu" >
                <a class="dropdown-item"  routerLink='java' routerLinkActive='active'>Java</a>
                <a class="dropdown-item" routerLink='spring' routerLinkActive='active'>Springboot</a>
                <a class="dropdown-item" routerLink='node' routerLinkActive='active'>NodeJs</a>
              </div>
            </li>       

这是我的 app-routing.module.ts 文件

import { Component, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CoursesComponent} from './courses/courses.component';
import {PagenotfoundComponent} from './pagenotfound/pagenotfound.component';
import { JavaComponent } from './java/java.component';
import { NodejsComponent } from './nodejs/nodejs.component';
import { SpringbootComponent } from './springboot/springboot.component';

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'courses', component: CoursesComponent,
  children: [
    {path: 'java', component: JavaComponent},
    {path: 'spring', component: SpringbootComponent},
    {path: 'node', component: NodejsComponent}
  ]},

  {path: '** ', component: PagenotfoundComponent}
];

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

我的下拉栏不起作用

标签： angulartypescriptroutes