Question

我是Angular的新手，正在尝试配置路由。我在FeatureModule中定义了路由，功能模块由选择器加载到应用程序中。

我的理解是，空路径”将导致指定组件在其父级的路由器出口中呈现。但是，这似乎没有发生。

请参阅此问题的Stackblitz演示： Routing Issue Live Demo

FeatureModule中的路由定义为：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
    {
      path: '',
      component: ChildComponent
    }
]}
];

HomeComponent（“特色家庭作品！”）已正确呈现。我希望ChildComponent可以在HomeComponent的路由器出口中呈现，但事实并非如此。

我在路由器出口上方添加了一些文本，以便于直观地查看希望渲染ChildComponent的位置：

[feature child should be rendered here]
  <router-outlet></router-outlet>

有人可以帮助我了解为什么不渲染ChildComponent吗？

谢谢！

（请注意，我在Stackblitz中为组件和路由器出口添加了一些div和CSS，以更好地可视化它们。）

Answer 1

任何时候，功能模块的路由模块中都有一个子阵列，您将需要至少有两个路由器出口-一个用于注入父级（在应用程序级别），一个用于其子级。注入。

如您所述，您的home组件将使用其选择器注入到应用程序中。在这种情况下，您不需要将其显示在任何路由器模块中，因为无论路径是什么，它都将被注入到应用程序中。

要注意的另一件事是，由于您没有功能路由模块中的app-routing.module.ts，因此您需要将表示RouterModule.forChild（routes）的行更改为forRoot，因为您需要forRoot首先。

更新后的代码-https://stackblitz.com/edit/angular-g8rdev-ng6routing-azv6rp?file=src/app/feature/feature-routing.module.ts

Answer 2

您为同一路径配置了两个组件。试试：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
    {
      path: 'child',
      component: ChildComponent
    }
]}
];

路径为空时，为什么子组件不会在父路由器的插座中呈现？

2 个答案: