子模块子路由不起作用("错误:无法匹配任何路由.")

Question

我正在使用Angular 6.0.3.我有一个名为"Admin"的子模块,有三个组件.管理员的根组件("AdminComponent")路由工作正常(path: ""),但我似乎无法触发任何其他组件.为什么Angular不能找到我的路线？

routes.ts

import { Routes } from "@angular/router";
import { SplashComponent } from "./splash/splash.component";
import { LoginComponent } from "./login/login.component";
import { WatchComponent } from "./watch/watch.component";

import { AdminComponent } from "./admin/admin/admin.component";
import { HomeComponent as AdminHomeComponent } from "./admin/home/home.component";
import { AddSongComponent } from "./admin/add-song/add-song.component";
import { AdminGuard } from "./auth/admin.guard";

export const appRoutes: Routes = [
  {
    path: "",
    children: [
      { path: "", component: SplashComponent, pathMatch: "full" },
      { path: "login", component: LoginComponent, pathMatch: "full" },
      { path: "watch", component: WatchComponent, pathMatch: "full" },
      {
        path: "admin",
        component: AdminComponent,
        pathMatch: "full",
        canActivate: [AdminGuard],
        children: [
          {
            path: "",
            component: AdminHomeComponent,
            pathMatch: "full",
            outlet: "admin"
          },
          {
            path: "add-song",
            component: AddSongComponent,
            pathMatch: "full",
            outlet: "admin"
          }
        ]
      }
    ]
  }
];

管理员/管理/ admin.component.html

<router-outlet name='admin'></router-outlet>

管理员/家庭/ home.component.html

<div>

   <a mat-raised-button [routerLink]="['add-song']">Add new song</a>

</div>

注意:我也尝试过[routerLink]="[{ outlets: { admin: ['add-song'] } }],仍未找到路线.

Answer 1

我建议你Lazy-loading在加载子模块时查看功能,这是在有许多模块时加载的正确方法.

在您的情况下,您将管理模块作为子模块,因此这里是路由配置,

 RouterModule.forRoot([
      { path: '', redirectTo: 'splash', pathMatch: 'full' },
      { path: 'splash', component: SplashComponent },
      { path: 'admin', loadChildren: './admin/admin.module#AdminModule' },
      { path: '**', component: NotFoundComponent }
    ], { enableTracing: true })]

Admin.module路由如下,

RouterModule.forChild([
      {
        path: '', component: AdminComponent,
        children: [

          { path: '', component: AdminHomeComponent }
          ,
          { path: 'add-song', component:  AddSongComponent}]
      }
  ])
  ]

工作STACKBLITZ演示

途径:

溅

• https://nested-routes-angular-lazyloading.stackblitz.io/splash

管理员

• https://nested-routes-angular-lazyloading.stackblitz.io/admin

管理员-AddSong

• https://nested-routes-angular-lazyloading.stackblitz.io/admin/add-song