使用 Angular 7 无法在子组件中访问子行
The child row is not accessible in child component using Angular 7
刚开始学习Angular7,对路由有点迷茫。
我在 app-routing 模块中创建了路由配置,在 message-routing 模块中创建了子行。
我期望这些路线:
/
/message
/message/inbox
/message/new
/about
但是无法访问 messageComponent 内部的路由:
Cannot match any routes. URL Segment: 'message/new'
这些是我的配置:
app-routing.module.ts:
const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'message',
component: MessageComponent
},
{
path: 'about',
component: AboutComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
留言-routing.module.ts:
const routes: Routes = [
{
path: 'message',
component: MessageComponent,
children: [
{
path: '',
component: InboxComponent
},
{
path: 'new',
component: NewComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
app.module.ts:
@NgModule({
declarations: [
AppComponent,
MessageComponent,
HomeComponent,
AboutComponent,
],
imports: [
BrowserModule,
MessageRoutingModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这是我的文件夹结构:
这是一个例子:
child-routing.module.ts
const routes: Routes = [
{
path: 'child,
component: ChildComponent
canActivate: [YourGuard],
children: [{
path: '',
component: ChildAComponent
},
{
path: 'some-route',
component: ChildBComponent
}]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
providers: [YourGuard],
exports: [RouterModule]
})
export class ChildRoutingModule { }
app-routing.module.ts
const routes: Routes = [
{
path: 'other-route,
component: OtherComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
并且在 app.module.ts:
...
import:[
ChildRoutingModule,
AppRoutingModule
]
我通过向 message-routing.module.ts 添加收件箱和新组件解决了这个问题。我不确定这里是否是添加它们的最佳位置,但这解决了问题。
message-routing.module.ts:
const routes: Routes = [
{
path: 'message',
component: MessageComponent,
children: [
{
path: '',
component: InboxComponent
},
{
path: 'new',
component: NewComponent
}
]
}
];
@NgModule({
declarations: [InboxComponent, NewComponent],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
刚开始学习Angular7,对路由有点迷茫。 我在 app-routing 模块中创建了路由配置,在 message-routing 模块中创建了子行。
我期望这些路线:
/
/message
/message/inbox
/message/new
/about
但是无法访问 messageComponent 内部的路由:
Cannot match any routes. URL Segment: 'message/new'
这些是我的配置:
app-routing.module.ts:
const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'message',
component: MessageComponent
},
{
path: 'about',
component: AboutComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
留言-routing.module.ts:
const routes: Routes = [
{
path: 'message',
component: MessageComponent,
children: [
{
path: '',
component: InboxComponent
},
{
path: 'new',
component: NewComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
app.module.ts:
@NgModule({
declarations: [
AppComponent,
MessageComponent,
HomeComponent,
AboutComponent,
],
imports: [
BrowserModule,
MessageRoutingModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这是我的文件夹结构:
这是一个例子:
child-routing.module.ts
const routes: Routes = [
{
path: 'child,
component: ChildComponent
canActivate: [YourGuard],
children: [{
path: '',
component: ChildAComponent
},
{
path: 'some-route',
component: ChildBComponent
}]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
providers: [YourGuard],
exports: [RouterModule]
})
export class ChildRoutingModule { }
app-routing.module.ts
const routes: Routes = [
{
path: 'other-route,
component: OtherComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
并且在 app.module.ts:
...
import:[
ChildRoutingModule,
AppRoutingModule
]
我通过向 message-routing.module.ts 添加收件箱和新组件解决了这个问题。我不确定这里是否是添加它们的最佳位置,但这解决了问题。
message-routing.module.ts:
const routes: Routes = [
{
path: 'message',
component: MessageComponent,
children: [
{
path: '',
component: InboxComponent
},
{
path: 'new',
component: NewComponent
}
]
}
];
@NgModule({
declarations: [InboxComponent, NewComponent],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})