Question

我正在开发Angular8应用，并使用功能模块进行开发。

我在通过延迟加载策略加载的模块之一上遇到路由问题。

这是这里使用的非常常见的模块依赖关系图： Dependency Graph

当应用程序运行时，我在侧面菜单上以树状视图显示了我所订阅的艺术家列表以及他们的专辑列表。我想使用菜单单击相册时出现问题。单击艺术家页面有效，但不适用于相册页面。单击相册链接时，在浏览器中会修改URL，但不会加载页面。

这是我的路线配置：

app.module.ts：

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    LoadingBarModule,
    BsDatepickerModule.forRoot(),
    SharedPipesModule
  ],
  declarations: [
    AppComponent,
    PageNotFoundComponent,
    LoginComponent
  ]

app-routing.module.ts

const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', component: LayoutComponent },
    { path: '', redirectTo: '/login',  pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];

@NgModule({
    imports: [ 
        CommonModule,
        CoreModule,
        RouterModule.forRoot(routes, {enableTracing: true}),

    ],
      exports: [ RouterModule ]
})

core-routing.module.ts

   const coreRoutes: Routes = [
    { 
        path: '', component: fromComponents.LayoutComponent,
        children: [
            { path: 'music', loadChildren: () => import('./../feature/music/music.module').then(m => m.MusicModule) },
            { path: 'other', loadChildren: () => import('./../feature/other/other.module').then(m => m.OtherModule) },
            { path: 'users', loadChildren: () => import('./../feature/user/user.module').then(m => m.UserModule) },
        ]
    }
   ];

    @NgModule({
        imports: [RouterModule.forChild(coreRoutes)],
        exports: [RouterModule]
    })

music-routing.module.ts

    const musicRoutes: Routes = [
        {
            path: '', component: fromComponents.RootElementComponent, // <= contains only a <router-outlet>
            children: [
                {   
                    path: ':authorId', pathMatch: 'full', component: fromComponents.AuthorComponent,
                    children: [
                        { path: 'disk/:diskId', pathMatch: 'full', component: fromComponents.DiskComponent }
                    ]   
                }
            ]
        }
];

@NgModule({
    imports: [RouterModule.forChild(musicRoutes)],
    exports: [RouterModule]
})

重要的是我想将专辑和歌手保存为同一模块。

我不明白为什么它不起作用，因为它适用于我的用户模块，其中有2条路由：

用户/用户用户/管理员

非常感谢您的帮助：）

Answer 1

您的孩子的路径路径语法有一个小错误

之前

children: [
        {   
            path: ':authorId', pathMatch: 'full', component: fromComponents.AuthorComponent,
            children: [
                { path: 'disk:diskId', pathMatch: 'full', component: fromComponents.DiskComponent }
            ]   
        }
    ]

之后

 children: [
            {   
                path: 'authorId', pathMatch: 'full', component: fromComponents.AuthorComponent,
                children: [
                    { path: 'disk/:diskId', pathMatch: 'full', component: fromComponents.DiskComponent }
                ]   
            }
        ]

角度-某些要素路线无法调用

1 个答案: