angular - 嵌套子路由模块不适用于角度 9
问题描述
我已经定义了如下的嵌套路由。
home --
about --
test
当点击链接host/about时,它的工作。但是当我导航到主机/关于/测试时,它不起作用,只是重定向到“/”。
请在stackblitz找到下面的代码和演示。并帮助我解决这个问题。
app.module.ts
const appRoutes: any = [
{ path: 'about', pathMatch: 'full', loadChildren: './about/about.module#AboutModule' },
];
@NgModule({
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(
appRoutes ) ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
app.component.html
<a href="/about">Go to /about</a><br>
<a href="about/test">Go to /about/test</a>
<router-outlet></router-outlet>
about.module.ts
const appRoutes: Routes = [
{ path: '', pathMatch: 'full', component: AboutComponent },
{ path: 'test', pathMatch: 'full', loadChildren: './test/test.module#TestModule' },
];
@NgModule({
declarations: [
AboutComponent
],
imports: [
CommonModule,
RouterModule.forChild(appRoutes)
],
providers: []
})
------------
test.module.ts
const appRoutes: Routes = [
{ path: '', pathMatch: 'full', component: TestComponent }
];
@NgModule({
declarations: [
TestComponent
],
imports: [
CommonModule,
RouterModule.forChild(appRoutes)
],
providers: []
})
解决方案
我在 stackblitz 中浏览了你的演示,发现了两个问题:
- 您不应该将 pathMatch: 'full' 用于具有 loadChildren 配置的路径。
app.module.ts
{ path: 'about', pathMatch: 'full', loadChildren: './about/about.module#AboutModule'
^^^^^^^^^^^^^^^^^
remove this
- 注意拼写
测试模块.ts
export class TesttModule {
^^
doubled 't'
推荐阅读
- c# - 无法在 C#/WPF 类库中使用 XAML ResourceDictionary
- excel - 如果 B 列中有值,则复制 A 列中的值,从 E7 Excel 开始粘贴
- c++ - 在c ++中的模板实例化中使用带有构造函数的类作为类型参数
- javascript - JavaScript:从对象的左右键中修剪空格
- reactjs - React Typescript 解构 providerValue
- ubuntu - 如何将 SSL 证书添加到 asp.net core docker swarm +letsencrypt?
- javascript - 为什么 JQuery 函数在更新面板中返回未定义
- python - 在没有用户输入的情况下在 python 中存储和使用加密密钥
- python - Numpy - 尝试根据单调条件拆分数组
- javascript - 在反应应用程序中通过 react-bootstrap css 应用自定义字体粗细样式面临困难