我是Angular的新手,并尝试配置路由。我在FeatureModule中定义了路由,并且功能模块由选择器加载到应用程序中。
我的理解是,空路径''将导致指定的组件在其父路由器插座中呈现。然而,这不是正在发生的事情。
请参阅此问题的Stackblitz演示:Routing Issue Live Demo
我的FeatureModule中的路由定义为:
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{
path: '',
component: ChildComponent
}
]}
];
HomeComponent(“功能主页工作!”)正确呈现。我希望在HomeComponent的路由器插座中渲染ChildComponent,但事实并非如此。
我在路由器插座上方添加了一些文本,以便于可视化我期望呈现ChildComponent的位置:
[feature child should be rendered here]
<router-outlet></router-outlet>
有人能帮助我理解为什么ChildComponent没有渲染吗?
谢谢!
(P.S.我在Stackblitz的组件和路由器插座中添加了一些div和CSS,以便更好地可视化它们)。
只要特征模块的路由模块中有子阵列,您就需要至少有两个路由器出口 - 一个用于注入父级(在应用级别),另一个用于注入其子级。
如您所述,您的主组件使用其选择器注入应用程序。在这种情况下,您不需要它出现在任何路由器模块内部,因为无论路径是什么,它都会被注入到应用程序中。
另外需要注意的是,由于您没有app-routing.module.ts,因此在功能路由模块中,您需要将说出RouterModule.forChild(路由)的行更改为forRoot,因为您首先需要forRoot。
您为同一路径配置了两个组件。尝试:
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{
path: 'child',
component: ChildComponent
}
]}
];